{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true,
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "第三节：解析库的使用——lxml bs4 and PyQuery.（静态爬取模块）\n",
    "==\n",
    "\n",
    "对于网页的节点来说，它可以定义id、class 或其他属性。\n",
    "而且节点之间还有层次关系，在网页中可以通过XPath或css选择器来定位一个或多个节点。\n",
    "那么，在页面解析时，利用XPath或css选择器来提取某个节点，然后再调用相应方法获取它的正文内容或者属性，\n",
    "不就可以提取我们想要的任意信息了吗？\n",
    "\n",
    "# 1.XPath解析\n",
    "\n",
    "这块内容和XML教程相通，参考资料：[https://www.w3school.com.cn/xpath/index.asp](https://www.w3school.com.cn/xpath/index.asp)\n",
    "\n",
    "例子： **//title[@lang=’eng']**\n",
    "这就是一个 XPath 规则 ，它代表选择所有名称为 title，同时属性 lang 的值为 eng 的节点。\n",
    "\n",
    "**外部库：lxml解析库**"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "<Element html at 0x13b5b3617c0>\n",
      "<html><body><div>\n",
      "<ul>\n",
      "<li class=\"item-0\"><a herf=\"link1.html\">first item\n",
      "<li class=\"item-1\"><a href=\"link2.html\">second Item</a>\n",
      "</li><li class=\"item-2\"><a href=\"link3.html\">third Item</a></li>\n",
      "    <li class=\"item-3\"><a href=\"link4.html\">fifth item</a></li>\n",
      "</a></li></ul></div>\n",
      "</body></html>\n"
     ]
    }
   ],
   "source": [
    "from lxml import etree\n",
    "originalText ='''\n",
    "<div>\n",
    "<ul>\n",
    "<li class='item-0'><a herf='link1.html'>first item\n",
    "<li class='item-1'><a href='link2.html'>second Item</a>\n",
    "<li class='item-2'><a href='link3.html'>third Item</a></li>\n",
    "    <li class='item-3'><a href='link4.html'>fifth item</a></li>\n",
    "</div>\n",
    "'''\n",
    "html = etree.HTML(originalText)\n",
    "print(html)\n",
    "print(etree.tostring(html).decode('utf-8'))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "这里首先导入lxml库的etree模块，然后声明了一段HTML文本，\n",
    "调用HTML类进行初始化，这样就成功构造了一个 XPath 解析对象。\n",
    "这里需要注意的是，HTML文本中的有些节点是没有闭合的，\n",
    "但是etree模块可以自动修正HTML文本。\n",
    "\n",
    "这里我们调用 tostring方法即可输出修正后的 HTML代码，\n",
    "但是结果是bytes类型。 这里利用decode方法将其转成str类\n",
    "\n",
    "上面的代码实现了对不完整的html格式文本的自动补全技术\n",
    "\n",
    "我们再查看一下lxml相关参数"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 51,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Name: lxml\n",
      "Version: 4.5.1\n",
      "Summary: Powerful and Pythonic XML processing library combining libxml2/libxslt with the ElementTree API.\n",
      "Home-page: https://lxml.de/\n",
      "Author: lxml dev team\n",
      "Author-email: lxml-dev@lxml.de\n",
      "License: BSD\n",
      "Location: f:\\anaconda\\envs\\python38\\lib\\site-packages\n",
      "Requires: \n",
      "Required-by: pyquery\n",
      "Note: you may need to restart the kernel to use updated packages.\n"
     ]
    }
   ],
   "source": [
    "pip show lxml"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 52,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\" \"http://www.w3.org/TR/REC-html40/loose.dtd\">\n",
      "<html><body><div>&#13;\n",
      "<ul>&#13;\n",
      "<li class=\"item-0\"><a herf=\"link1.html\">first item&#13;\n",
      "<li class=\"item-1\"><a href=\"link2.html\">second Item</a>&#13;\n",
      "</li><li class=\"item-2\"><a href=\"link3.html\">third Item</a></li>&#13;\n",
      "    <li class=\"item-3\"><a href=\"link4.html\">fifth item</a></li>&#13;\n",
      "</a></li></ul></div>&#13;\n",
      "</body></html>\n"
     ]
    }
   ],
   "source": [
    "with open('Lxmlparse.html','w') as file:\n",
    "    file.write(originalText)\n",
    "file.close()\n",
    "html = etree.parse('Lxmlparse.html',etree.HTMLParser())\n",
    "res = etree.tostring(html)\n",
    "print(res.decode('utf-8'))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "这次的输出结果略有不同，多了一个DOCTYPE的声明，不过对解析无任何影响,表明遵循XML的DTD协议，将文本更加标准化输出\n",
    "\n",
    "同时对文本的换行符\\n转化为&#13;了。同样这也是XML相关的语法。\n",
    "\n",
    "我们一般会用\\\\开头的XPath 规则来选取所有符合要求的节点。 这里以前面的HTML文本为例，如果要选取所有节点，可以这样实现："
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 53,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[<Element html at 0x1f05099d580>,\n",
       " <Element body at 0x1f0509a0400>,\n",
       " <Element div at 0x1f0509a0380>,\n",
       " <Element ul at 0x1f0509a0580>,\n",
       " <Element li at 0x1f0509a0500>,\n",
       " <Element a at 0x1f0509a05c0>,\n",
       " <Element li at 0x1f0509a0600>,\n",
       " <Element a at 0x1f0509a0640>,\n",
       " <Element li at 0x1f0509a0680>,\n",
       " <Element a at 0x1f0509a0540>,\n",
       " <Element li at 0x1f0509a06c0>,\n",
       " <Element a at 0x1f0509a0700>]"
      ]
     },
     "execution_count": 53,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "res = html.xpath('//*')\n",
    "res"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "这里使用＊代表匹配所有节点，也就是整个 HTML 文本中的所有节点都会被获取。可以看到，返回形式是一个列表，每个元素是 Element 类型，其后跟了节点的名称\n",
    "\n",
    "同理，如果我们想要获取所有的li或者a下的所有节点，可以使用xpath转化成想要的元素"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 54,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[<Element li at 0x1f0509a0500>,\n",
       " <Element li at 0x1f0509a0600>,\n",
       " <Element li at 0x1f0509a0680>,\n",
       " <Element li at 0x1f0509a06c0>]"
      ]
     },
     "execution_count": 54,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "res = html.xpath('//li[@class]')\n",
    "res"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "上面的返回都是表示元素的对象，下面我们需要获取对应的节点的文本\n",
    "\n",
    "### 任务： 获取属性class='item-2'的文本？"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 55,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[]"
      ]
     },
     "execution_count": 55,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "res = html.xpath(\".//li[@class='item-2']/text()\")\n",
    "res"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "没有获得文本？\n",
    "\n",
    "其中一个节点因为自动修正，li节点的尾标签添加的时候换行了，所以提取文本得到的唯一结果，就是li节点的尾标签和a节点的尾标签之间的换行符。\n",
    "或者直接没有数据。下面做一些修正"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 57,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "['third Item']"
      ]
     },
     "execution_count": 57,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "#方法1，逐层获取,利用层次结构实现\n",
    "res = html.xpath(\"//li[@class='item-2']/a/text()\")\n",
    "res"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 56,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "['third Item']"
      ]
     },
     "execution_count": 56,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "#方法2：\n",
    "res = html.xpath(\"//li[@class='item-2']//text()\")\n",
    "res"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "两种方法建议使用方法一，因为方法2//选取所有的子孙文本，导致多了不要的字符数据，影响结果，\n",
    "比如换行符等等\n",
    "\n",
    "下面是属性获取："
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "['link2.html', 'link3.html', 'link4.html']"
      ]
     },
     "execution_count": 10,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "res = html.xpath(\"//li/a/@href\")\n",
    "res"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "上面的代码返回的是所有href属性的内容\n",
    "\n",
    "下面的代码实现内容包含多个属性关键字的情景"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "['nnn', 'mmm']"
      ]
     },
     "execution_count": 11,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "text = '''\n",
    "<li class='li li-first'><a href='a.html'>nnn</a></li>\n",
    "<li class='li li-first' name=\"item\"><a href='b.html'>mmm</a></li>\n",
    "'''\n",
    "html = etree.HTML(text)\n",
    "res = html.xpath('//li[contains(@class,\"li\")]/a/text()')\n",
    "res"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "遇到多属性的情景，我们使用and语句实现交的要求"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "['mmm']"
      ]
     },
     "execution_count": 12,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "res = html.xpath('//li[contains(@class,\"li\") and @name=\"item\"]/a/text()')\n",
    "res"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 按序选择\n",
    "判定谓词使用方括号 [...] 进行表示：对指定关系轴的、满足节点测试的所有节点，使用判定谓词规定的条件进行筛选。如果判定谓词为一个整数 i（或是经过计算得到的），则表示选择序列中的第 i 个元素。例如：\n",
    "\n",
    "**/library/book[1] 表示选择 library 中的第一个 book 元素，\n",
    "    等价于 /library/book[position() = 1]；**\n",
    "\n",
    "**/library/book[@name = “TCP/IP”] 表示选择属性 name 的值为\n",
    "    “TCP/IP” 的 book 元素**"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "['first item']"
      ]
     },
     "execution_count": 13,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "originalText ='''\n",
    "<div>\n",
    "<ul>\n",
    "<li class='item-0'><a herf='link1.html'>first item</a>\n",
    "<li class='item-1'><a href='link2.html'>second Item</a>\n",
    "<li class='item-2'><a href='link3.html'>third Item</a></li>\n",
    "    <li class='item-3'><a href='link4.html'>fifth item</a></li></ul>\n",
    "</div>\n",
    "'''\n",
    "from lxml import etree\n",
    "html = etree.HTML(originalText)\n",
    "res = html.xpath('//li[1]/a/text()')\n",
    "res"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "上面代码表示：\n",
    "我们选取了第一个li节点，中括号中传入数字1即可。 注意，这里和代码中不同，序号是以1开头的，不是以0开头。\n",
    "\n",
    "## 节点轴选择\n",
    "\n",
    "节点测试可以是名称测试或者类型测试。\n",
    "\n",
    "名称测试表示根据指定的名称对当前节点进行测试；可以使用带命名空间限制的完整的元素名称。\n",
    "\n",
    "类型测试则允许根据节点的类型、以及在 Schema 中定义的数据类型进行测试（仅适用于元素和属性节点）；有些类型的节点（如注释节点和文本节点）是没有名称的，无法使用名称测试，所以只能使用类型测试的方式。\n",
    "\n",
    "名称测试：\n",
    "\n",
    "/library/descendant::book 表示查找 /library 元素的所有名为 book 的子孙节点\n",
    "\n",
    "类型测试：\n",
    "\n",
    "/library/child::node() 表示选择指定关系轴下的所有节点\n",
    "\n",
    "/library/book/text() 表示查找 book 元素下的所有文本节点\n",
    "\n",
    "通配符：\n",
    "\n",
    "/library/book/*  表示book元素下的所有子元素节点"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[<Element div at 0x13b5aeb7840>]"
      ]
     },
     "execution_count": 14,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from lxml import etree\n",
    "html = etree.HTML(originalText)\n",
    "res = html.xpath('//li[1]/a/ancestor::div')\n",
    "res"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[<Element li at 0x13b5acd12c0>,\n",
       " <Element li at 0x13b5b167c80>,\n",
       " <Element li at 0x13b5b167300>]"
      ]
     },
     "execution_count": 15,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "#sibling 同级节点\n",
    "res = html.xpath('//li[1]/following-sibling::*')\n",
    "res"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "至此，lxml相关大致结束。其本质就是利用XML的XPath语言进行筛选从而方便地查找，查询相关用法，可以进入访问url:\n",
    "[http://lxml.de/](http://lxml.de/)\n",
    "\n",
    "# 2.BeautifulSoup解析\n",
    "\n",
    "BeautifulSoup,即“美味汤”，借助网页的结构和属性等特性来解析网页。有了它，我们不用再去写一些复杂的正则表达式，只需要简单的几条语句，就可以完成网页中某个元素的提取。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "ename": "SyntaxError",
     "evalue": "invalid syntax (<ipython-input-16-a7a6b9e0f7db>, line 1)",
     "output_type": "error",
     "traceback": [
      "\u001b[1;36m  File \u001b[1;32m\"<ipython-input-16-a7a6b9e0f7db>\"\u001b[1;36m, line \u001b[1;32m1\u001b[0m\n\u001b[1;33m    pip show beautifulsoup4\u001b[0m\n\u001b[1;37m        ^\u001b[0m\n\u001b[1;31mSyntaxError\u001b[0m\u001b[1;31m:\u001b[0m invalid syntax\n"
     ]
    }
   ],
   "source": [
    "pip show beautifulsoup4"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "简单来说，BeautifulSoup就是Python的一个HTML或XML的解析库，可以用它来方便地从网页中提取数据。\n",
    "\n",
    "相关官方文档：[https://beautifulsoup.readthedocs.io/zh_CN/v4.4.0/](https://beautifulsoup.readthedocs.io/zh_CN/v4.4.0/)\n",
    "\n",
    "**官方解释如下：**\n",
    "\n",
    "BeautifulSoup提供一些简单的、\n",
    "Python式的函数来处理导航、搜索、修改分析树等功能。\n",
    "\n",
    "它是一个工具箱，通过解析文档为用户提供需要获取的数据，\n",
    "因为简单，所以不需要多少代码就可以写出一个完整的应用程序。\n",
    "\n",
    "BeautifulSoup自动将输入文档转换为Unicode编码，输出文档转换为 UTF-8 编码。\n",
    "不需考虑、编码方式，除非文档没有指定一个编码方式，这时你仅仅需说明一下原始编码方式就可以了 。\n",
    "\n",
    "BeautifulSoup 已成为和lxml、html6lib 一样出色的Python解释器，为用户灵活地提供不同的解析策略或强劲的速度。\n",
    "\n",
    "BeautifulSoup支持的解析器：\n",
    "\n",
    "<font face=\"黑体\" color=red size=4>\n",
    "  1. 标准库：html.pareser  执行速度适中，但是Python早期版本3.2.2前容错差\n",
    "\n",
    "2. lxml解析器（包括lxml与xml）唯一支持xml的解析器，都要装C语言库\n",
    "\n",
    "3. html5lib 容错好、以浏览器界面显示 生成h5格式文档，但是速度慢，不依赖外部扩展\n",
    "</font>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "\"The Dormouse's story\""
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "#样例html文档\n",
    "html_doc = \"\"\"\n",
    "<html><head><title>The Dormouse's story</title></head>\n",
    "<body>\n",
    "<p class=\"title\"><b>The Dormouse's story</b></p>\n",
    "\n",
    "<p class=\"story\">Once upon a time there were three little sisters; and their names were\n",
    "<a href=\"http://example.com/elsie\" class=\"sister\" id=\"link1\">Elsie</a>,\n",
    "<a href=\"http://example.com/lacie\" class=\"sister\" id=\"link2\">Lacie</a> and\n",
    "<a href=\"http://example.com/tillie\" class=\"sister\" id=\"link3\">Tillie</a>;\n",
    "and they lived at the bottom of a well.</p>\n",
    "\n",
    "<p class=\"story\"><a href='www.baidu.com'>...</a></p>\n",
    "\"\"\"\n",
    "from bs4 import BeautifulSoup\n",
    "soup = BeautifulSoup(html_doc,'lxml')\n",
    "soup.p.string"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 规整化打印："
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "<html>\n",
      " <head>\n",
      "  <title>\n",
      "   The Dormouse's story\n",
      "  </title>\n",
      " </head>\n",
      " <body>\n",
      "  <p class=\"title\">\n",
      "   <b>\n",
      "    The Dormouse's story\n",
      "   </b>\n",
      "  </p>\n",
      "  <p class=\"story\">\n",
      "   Once upon a time there were three little sisters; and their names were\n",
      "   <a class=\"sister\" href=\"http://example.com/elsie\" id=\"link1\">\n",
      "    Elsie\n",
      "   </a>\n",
      "   ,\n",
      "   <a class=\"sister\" href=\"http://example.com/lacie\" id=\"link2\">\n",
      "    Lacie\n",
      "   </a>\n",
      "   and\n",
      "   <a class=\"sister\" href=\"http://example.com/tillie\" id=\"link3\">\n",
      "    Tillie\n",
      "   </a>\n",
      "   ;\n",
      "and they lived at the bottom of a well.\n",
      "  </p>\n",
      "  <p class=\"story\">\n",
      "   ...\n",
      "  </p>\n",
      " </body>\n",
      "</html>\n"
     ]
    }
   ],
   "source": [
    "#规格化输出\n",
    "print(soup.prettify())"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'Elsie'"
      ]
     },
     "execution_count": 21,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "#输出文本a标签下的第一个节点内容\n",
    "soup.a.string"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "bs4.element.Tag"
      ]
     },
     "execution_count": 22,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "type(soup.title)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 23,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<title>The Dormouse's story</title>"
      ]
     },
     "execution_count": 23,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "#title 节点匹配\n",
    "soup.title"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'http://example.com/elsie'"
      ]
     },
     "execution_count": 24,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "soup.a.attrs['href']"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 25,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'http://example.com/elsie'"
      ]
     },
     "execution_count": 25,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "#获取属性值\n",
    "soup.a['href']"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 26,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "{'href': 'http://example.com/elsie', 'class': ['sister'], 'id': 'link1'}"
      ]
     },
     "execution_count": 26,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "#获取所有属性值，返回一个字典类型数据\n",
    "soup.a.attrs"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 34,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "bs4.BeautifulSoup"
      ]
     },
     "execution_count": 34,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "type(soup)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "这里需要注意的是，有的返回结果是字符串，有的返回结果是字符串组成的列表。\n",
    "比如，name属性的值是唯一的，返回的结果就是单个字符串。\n",
    "而对于class，一个节点元素可能有多个class，所以返回的是列表。\n",
    "在实际处理过程中，我们要注意判断类型。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<head><title>The Dormouse's story</title></head>"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "#嵌套选择\n",
    "soup.html.head"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "# 关联选择技术\n",
    "\n",
    "在做选择的时候，有时候不能做到一步就选到想要的节点元素，\n",
    "需要先选中某一个节点元素，然后以它为基准再选择它的子节点、父节点、兄弟节点等，\n",
    "这里就来介绍如何选择这些节点元素。\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[<title>The Dormouse's story</title>]"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "soup.head.contents\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "返回结果是列表形式。如果节点里既包含文本，又包含节点，最后会将它们以列表形式统一返回。\n",
    "\n",
    "需要注意的是，列表中的每个元素都是p节点的直接子节点。 比如第一个 a 节点里面包含一层 span 节点，这相当于孙子节点了，但是返回结果并没有单独把span节点选出来。\n",
    "\n",
    "contents属性得到的结果是直接子节点的列表。\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "<list_iterator object at 0x0000013B5B38B700>\n",
      "0 <b>The Dormouse's story</b>\n"
     ]
    }
   ],
   "source": [
    "#子节点遍历技术\n",
    "from bs4 import BeautifulSoup\n",
    "soup = BeautifulSoup(html_doc,'lxml')\n",
    "print(soup.p.children)\n",
    "for i,child in enumerate(soup.p.children):\n",
    "    print(i, child)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "获取父节点：使用parent属性；如果想获取所有的祖先节点，可以调用parents属性：\n",
    "\n",
    "调用了 children 属性来选择子节点；\n",
    "descendants会递归查询所有子节点，得到所有的子孙节点。\n",
    "\n",
    "next_sibling 和 previous_sibling 分别获取节点的下一个 和上一个兄弟元素， next_siblings 和 previous_siblings 则分别返回所有前面和后面的兄弟节点的生成器。\n",
    "\n",
    "下面实现：所有属性的获取，包括文本属性等"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "<generator object PageElement.next_siblings at 0x0000013B5BB85C80>\n",
      ",\n",
      "\n",
      "<a class=\"sister\" href=\"http://example.com/lacie\" id=\"link2\">Lacie</a>\n",
      " and\n",
      "\n",
      "<a class=\"sister\" href=\"http://example.com/tillie\" id=\"link3\">Tillie</a>\n",
      ";\n",
      "and they lived at the bottom of a well.\n",
      "[<p class=\"story\">Once upon a time there were three little sisters; and their names were\n",
      "<a class=\"sister\" href=\"http://example.com/elsie\" id=\"link1\">Elsie</a>,\n",
      "<a class=\"sister\" href=\"http://example.com/lacie\" id=\"link2\">Lacie</a> and\n",
      "<a class=\"sister\" href=\"http://example.com/tillie\" id=\"link3\">Tillie</a>;\n",
      "and they lived at the bottom of a well.</p>, <body>\n",
      "<p class=\"title\"><b>The Dormouse's story</b></p>\n",
      "<p class=\"story\">Once upon a time there were three little sisters; and their names were\n",
      "<a class=\"sister\" href=\"http://example.com/elsie\" id=\"link1\">Elsie</a>,\n",
      "<a class=\"sister\" href=\"http://example.com/lacie\" id=\"link2\">Lacie</a> and\n",
      "<a class=\"sister\" href=\"http://example.com/tillie\" id=\"link3\">Tillie</a>;\n",
      "and they lived at the bottom of a well.</p>\n",
      "<p class=\"story\">...</p>\n",
      "</body>, <html><head><title>The Dormouse's story</title></head>\n",
      "<body>\n",
      "<p class=\"title\"><b>The Dormouse's story</b></p>\n",
      "<p class=\"story\">Once upon a time there were three little sisters; and their names were\n",
      "<a class=\"sister\" href=\"http://example.com/elsie\" id=\"link1\">Elsie</a>,\n",
      "<a class=\"sister\" href=\"http://example.com/lacie\" id=\"link2\">Lacie</a> and\n",
      "<a class=\"sister\" href=\"http://example.com/tillie\" id=\"link3\">Tillie</a>;\n",
      "and they lived at the bottom of a well.</p>\n",
      "<p class=\"story\">...</p>\n",
      "</body></html>, <html><head><title>The Dormouse's story</title></head>\n",
      "<body>\n",
      "<p class=\"title\"><b>The Dormouse's story</b></p>\n",
      "<p class=\"story\">Once upon a time there were three little sisters; and their names were\n",
      "<a class=\"sister\" href=\"http://example.com/elsie\" id=\"link1\">Elsie</a>,\n",
      "<a class=\"sister\" href=\"http://example.com/lacie\" id=\"link2\">Lacie</a> and\n",
      "<a class=\"sister\" href=\"http://example.com/tillie\" id=\"link3\">Tillie</a>;\n",
      "and they lived at the bottom of a well.</p>\n",
      "<p class=\"story\">...</p>\n",
      "</body></html>]\n"
     ]
    }
   ],
   "source": [
    "print(soup.a.next_siblings)\n",
    "for i in list(soup.a.next_siblings):\n",
    "    print(i)\n",
    "print(list(soup.a.parents))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "前面所讲的选择方法都是通过属性来选择的，这种方法非常快，\n",
    "但是如果进行比较复杂的选择的话，它就比较烦琐，不够灵活了。\n",
    "幸好，BeautifulSoup还为我们提供了一些查询方法，比如 **find_all()**\n",
    "和 **find()** 等，调用它们，然后传入相应的参数，就可以灵活查询了。\n",
    "\n",
    "find_all，顾名思义，就是查询所有符合条件的元素。给它传入一些属性或文本，\n",
    "就可以得到符合条件的元素，它的功能十分强大。\n",
    "\n",
    "## API: find_all(name,attrs,recursive,text,**kwargs)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "携带a标签的html文本：\n",
      "[<a class=\"sister\" href=\"http://example.com/elsie\" id=\"link1\">Elsie</a>, <a class=\"sister\" href=\"http://example.com/lacie\" id=\"link2\">Lacie</a>, <a class=\"sister\" href=\"http://example.com/tillie\" id=\"link3\">Tillie</a>, <a href=\"www.baidu.com\">...</a>]\n",
      "携带b的文本\n",
      "[<b>The Dormouse's story</b>]\n",
      "进行遍历查询,查询p节点下的所有a节点得到的结果：\n",
      "[]\n",
      "Elsie\n",
      "Lacie\n",
      "Tillie\n",
      "...\n",
      "[<a class=\"sister\" href=\"http://example.com/elsie\" id=\"link1\">Elsie</a>, <a class=\"sister\" href=\"http://example.com/lacie\" id=\"link2\">Lacie</a>, <a class=\"sister\" href=\"http://example.com/tillie\" id=\"link3\">Tillie</a>]\n",
      "Elsie\n",
      "Lacie\n",
      "Tillie\n",
      "...\n",
      "[<a href=\"www.baidu.com\">...</a>]\n",
      "Elsie\n",
      "Lacie\n",
      "Tillie\n",
      "...\n",
      "进行属性查询......\n",
      "1.查找属性class=sister 且 id=link3 的文本列表\n",
      "[<a class=\"sister\" href=\"http://example.com/tillie\" id=\"link3\">Tillie</a>]\n",
      "2.查找属性class=sister的文本列表\n",
      "[<a class=\"sister\" href=\"http://example.com/elsie\" id=\"link1\">Elsie</a>, <a class=\"sister\" href=\"http://example.com/lacie\" id=\"link2\">Lacie</a>, <a class=\"sister\" href=\"http://example.com/tillie\" id=\"link3\">Tillie</a>]\n",
      "[<a class=\"sister\" href=\"http://example.com/elsie\" id=\"link1\">Elsie</a>, <a class=\"sister\" href=\"http://example.com/lacie\" id=\"link2\">Lacie</a>, <a class=\"sister\" href=\"http://example.com/tillie\" id=\"link3\">Tillie</a>]\n"
     ]
    }
   ],
   "source": [
    "html_doc = \"\"\"\n",
    "<html><head><title>The Dormouse's story</title></head>\n",
    "<body>\n",
    "<p class=\"title\"><b>The Dormouse's story</b></p>\n",
    "\n",
    "<p class=\"story\">Once upon a time there were three little sisters; and their names were\n",
    "<a href=\"http://example.com/elsie\" class=\"sister\" id=\"link1\">Elsie</a>,\n",
    "<a href=\"http://example.com/lacie\" class=\"sister\" id=\"link2\">Lacie</a> and\n",
    "<a href=\"http://example.com/tillie\" class=\"sister\" id=\"link3\">Tillie</a>;\n",
    "and they lived at the bottom of a well.</p>\n",
    "\n",
    "<p class=\"story\"><a href='www.baidu.com'>...</a></p>\n",
    "\"\"\"\n",
    "from bs4 import BeautifulSoup\n",
    "soup = BeautifulSoup(html_doc,'lxml')\n",
    "print('携带a标签的html文本：') #注意：返回值是一个列表\n",
    "print(soup.find_all('a'))\n",
    "print('携带b的文本')\n",
    "print(soup.find_all(name='b'))\n",
    "print(\"进行遍历查询,查询p节点下的所有a节点得到的结果：\")\n",
    "for a in soup.find_all('p'):\n",
    "    print(a.find_all(name='a'))\n",
    "    for b in soup.find_all('a'):\n",
    "        print(b.string)#获取文本：\n",
    "print(\"进行属性查询......\")\n",
    "print(\"1.查找属性class=sister 且 id=link3 的文本列表\")\n",
    "print(soup.find_all(attrs={'class':'sister','id':'link3'}))\n",
    "print('2.查找属性class=sister的文本列表')\n",
    "print(soup.find_all(attrs={'class':'sister'}))\n",
    "#注意属性的传参是字典类型的！\n",
    "#相同方法，我们用直接属性比较实现：\n",
    "print(soup.find_all(class_='sister'))\n",
    "#注意：这里的class和Python关键字重名了，因此需要变成class_模拟变化。"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "## 结合正则表达式查询相关文本数据，需要用到re.compile()实现面向对象操作！\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "提取文本中：总长度为5且后两位是ie的文本：\n",
      "['Elsie', 'Lacie']\n"
     ]
    }
   ],
   "source": [
    "import re\n",
    "print(\"提取文本中：总长度为5且后两位是ie的文本：\")\n",
    "print(soup.find_all(text=re.compile('^\\w{3}ie$')))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "除了 find_all()方法，还有 find()方法，只不过后者返回的是单个元素，也就是第一个匹配的元素，而前者返回的是所有匹配的元素组成的列表\n",
    "\n",
    "另外，还有许多查询方法，其用法与前面介绍的find_all()、find()方法完全相同，\n",
    "只不过查询范围不同，这里简单说明一下。\n",
    "\n",
    "**find_parents()**和**find_parent()**：前者返回所有祖先节点,后者返回直接父节点。\n",
    "\n",
    "**find_next_siblings()**和**find_next_ sibling()**：前者返回后面所有的兄弟节点，\n",
    "后者返回后面第一个兄弟节点。\n",
    "\n",
    "**find_previous_siblings()**和**find_previous_sibling()**：\n",
    "前者返回前面所有的兄弟节点，后者返回前面第一个兄弟节点。\n",
    "\n",
    "## CSS选择器\n",
    "\n",
    "BeautifulSoup还提供了另外一种选择器，那就是css选择器,相关文档参考：\n",
    "[https://www.w3school.com.cn/cssref/css_selectors.asp](https://www.w3school.com.cn/cssref/css_selectors.asp)\n",
    "\n",
    "使用css选择器时，只需要调用select()方法，传入相应的CSS选择器即可，"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[<b>The Dormouse's story</b>]\n",
      "[<a class=\"sister\" href=\"http://example.com/elsie\" id=\"link1\">Elsie</a>, <a class=\"sister\" href=\"http://example.com/lacie\" id=\"link2\">Lacie</a>, <a class=\"sister\" href=\"http://example.com/tillie\" id=\"link3\">Tillie</a>]\n",
      "[]\n",
      "获取文本。。。。。。\n",
      "Text:  The Dormouse's story\n",
      "String:  The Dormouse's story\n",
      "Text:  Once upon a time there were three little sisters; and their names were\n",
      "Elsie,\n",
      "Lacie and\n",
      "Tillie;\n",
      "and they lived at the bottom of a well.\n",
      "String:  None\n",
      "Text:  ...\n",
      "String:  ...\n"
     ]
    }
   ],
   "source": [
    "tml_doc = \"\"\"\n",
    "<html><head><title>The Dormouse's story</title></head>\n",
    "<body>\n",
    "<p class=\"title\"><b>The Dormouse's story</b></p>\n",
    "\n",
    "<p class=\"story\">Once upon a time there were three little sisters; and their names were\n",
    "<a href=\"http://example.com/elsie\" class=\"sister\" id=\"link1\">Elsie</a>,\n",
    "<a href=\"http://example.com/lacie\" class=\"sister\" id=\"link2\">Lacie</a> and\n",
    "<a href=\"http://example.com/tillie\" class=\"sister\" id=\"link3\">Tillie</a>;\n",
    "and they lived at the bottom of a well.</p>\n",
    "\n",
    "<p class=\"story\"><a href='www.baidu.com'>...</a></p>\n",
    "\"\"\"\n",
    "from bs4 import BeautifulSoup\n",
    "soup = BeautifulSoup(html_doc,'lxml')\n",
    "print(soup.select('p b'))\n",
    "print(soup.select('.story .sister'))#匹配class=?\n",
    "print(soup.select('#link1 .sister'))#匹配id号的\n",
    "#获取文本\n",
    "print(\"获取文本。。。。。。\")\n",
    "for i in soup.select('p'):\n",
    "    print(\"Text: \",i.get_text())\n",
    "    print(\"String: \",i.string)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# PyQuery 探索更强大的选择器\n",
    "\n",
    "如果你对 Web 有所涉及，如果你比较喜欢用CSS选择器，如果你对jQuery有所了解，\n",
    "那么这里有一个更适合你的解析库——pyquery。\n",
    "\n",
    "## 初始化pyquery\n",
    "\n",
    "初始化 pyquery的时候，也需要传入HTML文本来初始化一个 PyQuery 对象。\n",
    "\n",
    "它的初始化方式有多种，比如直接传入字符串，传入URL，传入文件名，等等。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "打印a 标签数据:\n",
      "<a href=\"http://example.com/elsie\" class=\"sister\" id=\"link1\">Elsie</a>,\n",
      "<a href=\"http://example.com/lacie\" class=\"sister\" id=\"link2\">Lacie</a> and\n",
      "<a href=\"http://example.com/tillie\" class=\"sister\" id=\"link3\">Tillie</a>;\n",
      "and they lived at the bottom of a well.<a href=\"www.baidu.com\">...</a>\n",
      "a标签：\n"
     ]
    },
    {
     "data": {
      "text/plain": [
       "[<a#link1.sister>, <a#link2.sister>, <a#link3.sister>, <a>]"
      ]
     },
     "execution_count": 9,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "html_doc = \"\"\"\n",
    "<html><head><title>The Dormouse's story</title></head>\n",
    "<body>\n",
    "<p class=\"title\"><b>The Dormouse's story</b></p>\n",
    "\n",
    "<p class=\"story\">Once upon a time there were three little sisters; and their names were\n",
    "<a href=\"http://example.com/elsie\" class=\"sister\" id=\"link1\">Elsie</a>,\n",
    "<a href=\"http://example.com/lacie\" class=\"sister\" id=\"link2\">Lacie</a> and\n",
    "<a href=\"http://example.com/tillie\" class=\"sister\" id=\"link3\">Tillie</a>;\n",
    "and they lived at the bottom of a well.</p>\n",
    "\n",
    "<p class=\"story\"><a href='www.baidu.com'>...</a></p>\n",
    "\"\"\"\n",
    "from pyquery import PyQuery\n",
    "doc = PyQuery(html_doc)\n",
    "print('打印a 标签数据:')\n",
    "print(doc('a'))\n",
    "print(\"a标签：\")\n",
    "doc('a')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Title 标签：\n",
      "<title>CSS 选择器 | 菜鸟教程</title>\n",
      "\n",
      "  \n",
      "p标签：\n",
      "<p class=\"elem_d11\">CSS选择器用于选择你想要的元素的样式的模式。</p>&#13;\n",
      "<p class=\"elem_d11\">\"CSS\"列表示在CSS版本的属性定义（CSS1，CSS2，或对CSS3）。</p>&#13;\n",
      "<p><a id=\"cancel-comment-reply-link\" href=\"javascript:;\">取消</a></p>&#13;\n",
      "\t\t\t<p>感谢您的支持，我会继续努力的!</p>\n",
      "      <p>打开<span id=\"shang_pay_txt\">支付宝</span>扫一扫，即可进行扫码打赏哦</p>\n",
      "        <p><a href=\"//c.runoob.com/codedemo/5348\" target=\"_blank\"><span style=\" font-size: 14px;color: #000;font-weight: bold;\">点我查看本站打赏源码！</span></a></p>\n",
      "      <p class=\"fieldset\">\n",
      "\t\t\t\t\t<label class=\"image-replace cd-username\" for=\"signin-username\">用户名</label>\n",
      "\t\t\t\t\t<input class=\"full-width has-padding has-border\" id=\"signin-username\" name=\"username\" type=\"text\" placeholder=\"输入用户名\"/>\n",
      "\t\t\t\t</p>\n",
      "\n",
      "\t\t\t\t<p class=\"fieldset\">\n",
      "\t\t\t\t\t<label class=\"image-replace cd-password\" for=\"signin-password\">密码</label>\n",
      "\t\t\t\t\t<input class=\"full-width has-padding has-border\" id=\"signin-password\" name=\"password\" type=\"password\" placeholder=\"输入密码\"/>\n",
      "\t\t\t\t</p>\n",
      "\t\t\t\t\n",
      "\t\t\t\t<p class=\"fieldset\">\n",
      "\t\t\t\t\t<input type=\"checkbox\" id=\"remember-me\" checked=\"checked\"/>\n",
      "\t\t\t\t\t<label for=\"remember-me\">记住登录状态</label>\n",
      "          <a href=\"//www.runoob.com/reset-password\" style=\"float: right;padding-right: 20px;\" target=\"_blank\">忘记密码？</a>\n",
      "\t\t\t\t</p>\n",
      " \t\t\t\t<p class=\"fieldset\">\n",
      "\t\t\t\t\t<input class=\"full-width2\" type=\"submit\" value=\"登 录\"/>\n",
      "\t\t\t\t</p>\n",
      "        <p class=\"fieldset\">\n",
      "\t\t\t\t\t<label class=\"image-replace cd-password\" for=\"verifycode\">邀请码</label>\n",
      "\t\t\t\t\t<input class=\"full-width has-padding has-border\" id=\"signup-verifycode\" name=\"verifycode\" type=\"text\" placeholder=\"输入邀请码\"/>\n",
      "\t\t\t\t</p>\n",
      "\t\t\t\t<p class=\"fieldset\">\n",
      "\t\t\t\t\t<label class=\"image-replace cd-username\" for=\"signup-username\">用户名</label>\n",
      "\t\t\t\t\t<input class=\"full-width has-padding has-border\" id=\"signup-username\" name=\"name\" type=\"text\" placeholder=\"输入用户名\"/>\n",
      "\t\t\t\t</p>\n",
      "\n",
      "\t\t\t\t<p class=\"fieldset\">\n",
      "\t\t\t\t\t<label class=\"image-replace cd-email\" for=\"signup-email\">邮箱</label>\n",
      "\t\t\t\t\t<input class=\"full-width has-padding has-border\" name=\"email\" id=\"signup-email\" type=\"email\" placeholder=\"输入mail\"/>\n",
      "\t\t\t\t</p>\n",
      "\n",
      "\t\t\t\t<p class=\"fieldset\">\n",
      "\t\t\t\t\t<label class=\"image-replace cd-password\" for=\"signup-password\">密码</label>\n",
      "\t\t\t\t\t<input class=\"full-width has-padding has-border\" id=\"signup-password\" name=\"password\" type=\"password\" placeholder=\"输入密码\"/>\n",
      "\t\t\t\t</p>\n",
      "\t\t\t\t<p class=\"fieldset\">\n",
      "\t\t\t\t\t<label class=\"image-replace cd-password\" for=\"signup-password2\">重复输入密码</label>\n",
      "\t\t\t\t\t<input class=\"full-width has-padding has-border\" id=\"signup-password2\" name=\"password2\" type=\"password\" placeholder=\"重复输入密码\"/>\n",
      "\t\t\t\t</p>\n",
      "\t\t\t\t\n",
      "\t\t\t\t<p class=\"fieldset\">\n",
      "\t\t\t\t\t<input class=\"full-width2\" type=\"submit\" value=\"注册新用户\"/>\n",
      "\t\t\t\t</p>\n",
      "\t\t\t\t<p class=\"fieldset\">\n",
      "\t\t\t\t  <a href=\"//www.runoob.com/w3cnote/runoob-user-test-intro.html#invite\" target=\"_blank\">如何获取邀请码？</a>\n",
      "\t\t\t\t  </p>\n",
      "\t\t\t\t\n"
     ]
    }
   ],
   "source": [
    "#url初始化\n",
    "from pyquery import PyQuery\n",
    "#发送请求\n",
    "doc = PyQuery(url='https://www.runoob.com/cssref/css-selectors.html')\n",
    "print(\"Title 标签：\")\n",
    "print(doc('title'))\n",
    "print('p标签：')\n",
    "print(doc('p'))\n",
    "#打印url下的title标签的数据"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "PyQuery对象会首先请求这个URL，\n",
    "然后用得到的HTML内容完成初始化，\n",
    "这其实就相当于用网页的源代码以字符串的形式传递给PyQuery类来初始化。\n",
    "\n",
    "等价于：\n",
    "\n",
    "**doc =PyQuery(requests.get(url).text)**\n",
    "**print(doc('title'))**\n",
    "\n",
    "还可以传递本地的文件名，此时将参数指定为filename即可"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "<li class=\"item-0\"><a herf=\"link1.html\">first item\n",
      "<li class=\"item-1\"><a href=\"link2.html\">second Item</a>\n",
      "</li><li class=\"item-2\"><a href=\"link3.html\">third Item</a></li>\n",
      "    <li class=\"item-3\"><a href=\"link4.html\">fifth item</a></li>\n",
      "</a></li><li class=\"item-1\"><a href=\"link2.html\">second Item</a>\n",
      "</li><li class=\"item-2\"><a href=\"link3.html\">third Item</a></li>\n",
      "    <li class=\"item-3\"><a href=\"link4.html\">fifth item</a></li>\n",
      "\n"
     ]
    }
   ],
   "source": [
    "#file gaining\n",
    "doc =PyQuery(filename='Lxmlparse.html')\n",
    "print(doc('li'))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "当然最常用的初始化方式还是以字符串形式传递。\n",
    "\n",
    "## 使用CSS选择器+Pyquery实现编程"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "<p class=\"story\">Once upon a time there were three little sisters; and their names were\n",
      "<a href=\"http://example.com/elsie\" class=\"sister\" id=\"link1\">Elsie</a>,\n",
      "<a href=\"http://example.com/lacie\" class=\"sister\" id=\"link2\">Lacie</a> and\n",
      "<a href=\"http://example.com/tillie\" class=\"sister\" id=\"link3\">Tillie</a>;\n",
      "and they lived at the bottom of a well.</p>\n",
      "\n",
      "<p class=\"story\"><a href=\"www.baidu.com\">...</a></p>\n",
      "\n",
      "Type:\n",
      "<class 'pyquery.pyquery.PyQuery'>\n"
     ]
    }
   ],
   "source": [
    "doc = PyQuery(html_doc)\n",
    "print(doc('.story'))\n",
    "print(\"Type:\")\n",
    "print(type(doc('#container .story p')))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "可以看到，CSS选择器下获取的类型依然是 PyQuery 类型。\n",
    "\n",
    "下面简述子节点父节点和兄弟节点"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "<!DOCTYPE html>\n",
      "<html>\n",
      " <head>\n",
      "  <meta content=\"text/html; charset=utf-8\" http-equiv=\"Content-Type\"/>\n",
      "  <meta content=\"465267610762567726375\" property=\"qc:admins\"/>\n",
      "  <meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\"/>\n",
      "  <title>\n",
      "   CSS 选择器 | 菜鸟教程\n",
      "  </title>\n",
      "  <link href=\"//s.w.org\" rel=\"dns-prefetch\"/>\n",
      "  <link href=\"http://www.runoob.com/cssref/css-selectors.html\" rel=\"canonical\"/>\n",
      "  <meta content=\"CSS 选择器\" name=\"keywords\"/>\n",
      "  <meta content=\"CSS 选择器  CSS选择器用于选择你想要的元素的样式的模式。 “CSS”列表示在CSS版本的属性定义（CSS1，CSS2，或对CSS3）。         选择器     示例     示例说明     CSS    \t     .class     .intro     选择所有class=“intro”的元素     1    \t     #id     #firstname     选择所有id='firstname..\" name=\"description\"/>\n",
      "  <link href=\"https://static.runoob.com/images/favicon.ico\" mce_href=\"//static.runoob.com/images/favicon.ico\" rel=\"shortcut icon\" type=\"image/x-icon\"/>\n",
      "  <link href=\"/wp-content/themes/runoob/style.css?v=1.156\" media=\"all\" rel=\"stylesheet\" type=\"text/css\"/>\n",
      "  <link href=\"https://static.runoob.com/assets/font-awesome/4.7.0/css/font-awesome.min.css\" media=\"all\" rel=\"stylesheet\"/>\n",
      "  <!--[if gte IE 9]><!-->\n",
      "  <script src=\"https://static.runoob.com/assets/jquery/2.0.3/jquery.min.js\">\n",
      "  </script>\n",
      "  <!--<![endif]-->\n",
      "  <!--[if lt IE 9]>\n",
      "     <script src=\"https://cdn.staticfile.org/jquery/1.9.1/jquery.min.js\"></script>\n",
      "     <script src=\"https://cdn.staticfile.org/html5shiv/r29/html5.min.js\"></script>\n",
      "  <![endif]-->\n",
      "  <link href=\"https://static.runoob.com/images/icon/mobile-icon.png\" rel=\"apple-touch-icon\"/>\n",
      "  <meta content=\"菜鸟教程\" name=\"apple-mobile-web-app-title\"/>\n",
      " </head>\n",
      " <body>\n",
      "  <!--  头部 -->\n",
      "  <div class=\"container logo-search\">\n",
      "   <div class=\"col search row-search-mobile\">\n",
      "    <form action=\"index.php\">\n",
      "     <input autocomplete=\"off\" class=\"placeholder\" name=\"s\" placeholder=\"搜索……\"/>\n",
      "    </form>\n",
      "   </div>\n",
      "   <div class=\"row\">\n",
      "    <div class=\"col logo\">\n",
      "     <h1>\n",
      "      <a href=\"/\">\n",
      "       菜鸟教程 -- 学的不仅是技术，更是梦想！\n",
      "      </a>\n",
      "     </h1>\n",
      "    </div>\n",
      "    <div class=\"col right-list\">\n",
      "     <button class=\"btn btn-responsive-nav btn-inverse\" data-target=\".nav-main-collapse\" data-toggle=\"collapse\" id=\"pull\" style=\"\">\n",
      "      <i class=\"fa fa-navicon\">\n",
      "      </i>\n",
      "     </button>\n",
      "    </div>\n",
      "    <div class=\"col search search-desktop last\">\n",
      "     <form action=\"//www.runoob.com/\" target=\"_blank\">\n",
      "      <input autocomplete=\"off\" class=\"placeholder\" id=\"s\" name=\"s\" placeholder=\"搜索……\"/>\n",
      "     </form>\n",
      "    </div>\n",
      "   </div>\n",
      "  </div>\n",
      "  <!-- 导航栏 -->\n",
      "  <!-- 导航栏 -->\n",
      "  <div class=\"container navigation\">\n",
      "   <div class=\"row\">\n",
      "    <div class=\"col nav\">\n",
      "     <ul class=\"pc-nav\">\n",
      "      <li>\n",
      "       <a href=\"//www.runoob.com/\">\n",
      "        首页\n",
      "       </a>\n",
      "      </li>\n",
      "      <li>\n",
      "       <a href=\"/html/html-tutorial.html\">\n",
      "        HTML\n",
      "       </a>\n",
      "      </li>\n",
      "      <li>\n",
      "       <a href=\"/css/css-tutorial.html\">\n",
      "        CSS\n",
      "       </a>\n",
      "      </li>\n",
      "      <li>\n",
      "       <a href=\"/js/js-tutorial.html\">\n",
      "        JavaScript\n",
      "       </a>\n",
      "      </li>\n",
      "      <li>\n",
      "       <a href=\"/jquery/jquery-tutorial.html\">\n",
      "        jQuery\n",
      "       </a>\n",
      "      </li>\n",
      "      <li>\n",
      "       <a href=\"/bootstrap/bootstrap-tutorial.html\">\n",
      "        Bootstrap\n",
      "       </a>\n",
      "      </li>\n",
      "      <li>\n",
      "       <a href=\"/python3/python3-tutorial.html\">\n",
      "        Python3\n",
      "       </a>\n",
      "      </li>\n",
      "      <li>\n",
      "       <a href=\"/python/python-tutorial.html\">\n",
      "        Python2\n",
      "       </a>\n",
      "      </li>\n",
      "      <li>\n",
      "       <a href=\"/java/java-tutorial.html\">\n",
      "        Java\n",
      "       </a>\n",
      "      </li>\n",
      "      <li>\n",
      "       <a href=\"/cprogramming/c-tutorial.html\">\n",
      "        C\n",
      "       </a>\n",
      "      </li>\n",
      "      <li>\n",
      "       <a href=\"/cplusplus/cpp-tutorial.html\">\n",
      "        C++\n",
      "       </a>\n",
      "      </li>\n",
      "      <li>\n",
      "       <a href=\"/csharp/csharp-tutorial.html\">\n",
      "        C#\n",
      "       </a>\n",
      "      </li>\n",
      "      <li>\n",
      "       <a href=\"/sql/sql-tutorial.html\">\n",
      "        SQL\n",
      "       </a>\n",
      "      </li>\n",
      "      <li>\n",
      "       <a href=\"/mysql/mysql-tutorial.html\">\n",
      "        MySQL\n",
      "       </a>\n",
      "      </li>\n",
      "      <li>\n",
      "       <a href=\"/php/php-tutorial.html\">\n",
      "        PHP\n",
      "       </a>\n",
      "      </li>\n",
      "      <li>\n",
      "       <a href=\"/browser-history\">\n",
      "        本地书签\n",
      "       </a>\n",
      "      </li>\n",
      "      <!--\n",
      "\t\t\t\t\t<li><a style=\"font-weight:bold;\" href=\"https://www.runoob.com/linux/linux-cloud-server.html\" target=\"_blank\" onclick=\"_hmt.push(['_trackEvent', 'yun', 'click', 'yun'])\"  title=\"云服务器\">云服务器</a></li>\n",
      "\t\t\t\n",
      "\t\t\t\t<li><a href=\"/w3cnote/knowledge-start.html\" style=\"font-weight: bold;\" onclick=\"_hmt.push(['_trackEvent', '星球', 'click', 'start'])\" title=\"我的圈子\">我的圈子</a></li>\t\t\t\t\n",
      "\t\t\t\t<li><a href=\"javascript:;\" class=\"runoob-pop\">登录</a></li>\n",
      "\t\t\t\t-->\n",
      "     </ul>\n",
      "     <ul class=\"mobile-nav\">\n",
      "      <li>\n",
      "       <a href=\"//www.runoob.com/\">\n",
      "        首页\n",
      "       </a>\n",
      "      </li>\n",
      "      <li>\n",
      "       <a href=\"/html/html-tutorial.html\">\n",
      "        HTML\n",
      "       </a>\n",
      "      </li>\n",
      "      <li>\n",
      "       <a href=\"/css/css-tutorial.html\">\n",
      "        CSS\n",
      "       </a>\n",
      "      </li>\n",
      "      <li>\n",
      "       <a href=\"/js/js-tutorial.html\">\n",
      "        JS\n",
      "       </a>\n",
      "      </li>\n",
      "      <li>\n",
      "       <a href=\"/browser-history\">\n",
      "        本地书签\n",
      "       </a>\n",
      "      </li>\n",
      "      <a class=\"search-reveal\" href=\"javascript:void(0)\">\n",
      "       Search\n",
      "      </a>\n",
      "     </ul>\n",
      "    </div>\n",
      "   </div>\n",
      "  </div>\n",
      "  <!--  内容  -->\n",
      "  <div class=\"container main\">\n",
      "   <!-- 中间 -->\n",
      "   <div class=\"row\">\n",
      "    <div class=\"col left-column\">\n",
      "     <div class=\"tab\">\n",
      "      CSS 参考手册\n",
      "      <a data-cate=\"41\" href=\"javascript:void(0);\" id=\"moon\" title=\"夜间模式\">\n",
      "       <i aria-hidden=\"true\" class=\"fa fa-moon-o\" style=\"font-size: 1.4em;float: right;margin: 4px 6px 0;\">\n",
      "       </i>\n",
      "      </a>\n",
      "      <a data-cate=\"41\" href=\"javascript:void(0);\" id=\"sun\" style=\"display:none;\" title=\"日间模式\">\n",
      "       <i aria-hidden=\"true\" class=\"fa fa-sun-o\" style=\"font-size: 1.4em;float: right;margin: 4px 6px 0;\">\n",
      "       </i>\n",
      "      </a>\n",
      "     </div>\n",
      "     <div class=\"sidebar-box gallery-list\">\n",
      "      <div class=\"design\" id=\"leftcolumn\">\n",
      "       <a href=\"/cssref/css-reference.html\" target=\"_top\" title=\"CSS 参考手册\">\n",
      "        CSS 参考手册\n",
      "       </a>\n",
      "       <a href=\"/cssref/css-selectors.html\" target=\"_top\" title=\"CSS 选择器\">\n",
      "        CSS 选择器\n",
      "       </a>\n",
      "       <a href=\"/cssref/css-ref-aural.html\" target=\"_top\" title=\"CSS 听觉参考手册\">\n",
      "        CSS 听觉参考手册\n",
      "       </a>\n",
      "       <a href=\"/cssref/css-websafe-fonts.html\" target=\"_top\" title=\"CSS Web安全字体\">\n",
      "        CSS Web安全字体\n",
      "       </a>\n",
      "       <a href=\"css-animatable.html\" target=\"_top\" title=\"CSS 动画\">\n",
      "        CSS 动画\n",
      "       </a>\n",
      "       <a href=\"css-functions.html\" target=\"_top\" title=\"CSS 函数\">\n",
      "        CSS 函数\n",
      "       </a>\n",
      "       <a href=\"/cssref/css-units.html\" target=\"_top\" title=\"CSS 单位\">\n",
      "        CSS 单位\n",
      "       </a>\n",
      "       <a href=\"/cssref/css-colors.html\" target=\"_top\" title=\"CSS 颜色\">\n",
      "        CSS 颜色\n",
      "       </a>\n",
      "       <a href=\"/cssref/css-colors-legal.html\" target=\"_top\" title=\"CSS 合法颜色值\">\n",
      "        CSS 合法颜色值\n",
      "       </a>\n",
      "       <a href=\"/cssref/css-colornames.html\" target=\"_top\" title=\"CSS 颜色名称\">\n",
      "        CSS 颜色名称\n",
      "       </a>\n",
      "       <a href=\"/cssref/css-colorsfull.html\" target=\"_top\" title=\"CSS 颜色十六进制值\">\n",
      "        CSS 颜色十六进制值\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-browsersupport.html\" target=\"_top\" title=\"CSS 浏览器支持\">\n",
      "        CSS 浏览器支持\n",
      "       </a>\n",
      "       <a href=\"/sass/sass-tutorial.html\" target=\"_top\">\n",
      "        Sass 教程\n",
      "       </a>\n",
      "       <br/>\n",
      "       <h2 class=\"left\">\n",
      "        <span class=\"left_h2\">\n",
      "         CSS\n",
      "        </span>\n",
      "        属性\n",
      "       </h2>\n",
      "       <a href=\"css3-pr-align-content.html\" target=\"_top\">\n",
      "        align-content\n",
      "       </a>\n",
      "       <a href=\"css3-pr-align-items.html\" target=\"_top\">\n",
      "        align-items\n",
      "       </a>\n",
      "       <a href=\"css3-pr-align-self.html\" target=\"_top\">\n",
      "        align-self\n",
      "       </a>\n",
      "       <a href=\"css3-pr-all.html\" target=\"_top\">\n",
      "        all\n",
      "       </a>\n",
      "       <a href=\"css3-pr-animation.html\" target=\"_top\">\n",
      "        animation\n",
      "       </a>\n",
      "       <a href=\"css3-pr-animation-delay.html\" target=\"_top\">\n",
      "        animation-delay\n",
      "       </a>\n",
      "       <a href=\"css3-pr-animation-direction.html\" target=\"_top\">\n",
      "        animation-direction\n",
      "       </a>\n",
      "       <a href=\"css3-pr-animation-duration.html\" target=\"_top\">\n",
      "        animation-duration\n",
      "       </a>\n",
      "       <a href=\"css3-pr-animation-fill-mode.html\" target=\"_top\">\n",
      "        animation-fill-mode\n",
      "       </a>\n",
      "       <a href=\"css3-pr-animation-iteration-count.html\" target=\"_top\">\n",
      "        animation-iteration-count\n",
      "       </a>\n",
      "       <a href=\"css3-pr-animation-name.html\" target=\"_top\">\n",
      "        animation-name\n",
      "       </a>\n",
      "       <a href=\"css3-pr-animation-play-state.html\" target=\"_top\">\n",
      "        animation-play-state\n",
      "       </a>\n",
      "       <a href=\"css3-pr-animation-timing-function.html\" target=\"_top\">\n",
      "        animation-timing-function\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-appearance.html\" target=\"_top\" title=\"CSS3 appearance 属性\">\n",
      "        appearance\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-backface-visibility.html\" target=\"_top\" title=\"CSS3 backface-visibility 属性\">\n",
      "        backface-visibility\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-background.html\" target=\"_top\" title=\"CSS background 属性\">\n",
      "        background\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-background-attachment.html\" target=\"_top\" title=\"CSS background-attachment 属性\">\n",
      "        background-attachment\n",
      "       </a>\n",
      "       <a href=\"pr-background-blend-mode.html\" target=\"_top\">\n",
      "        background-blend-mode\n",
      "       </a>\n",
      "       <a href=\"css3-pr-background-clip.html\" target=\"_top\">\n",
      "        background-clip\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-background-color.html\" target=\"_top\" title=\"CSS background-color 属性\">\n",
      "        background-color\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-background-image.html\" target=\"_top\" title=\"CSS background-image 属性\">\n",
      "        background-image\n",
      "       </a>\n",
      "       <a href=\"css3-pr-background-origin.html\" target=\"_top\">\n",
      "        background-origin\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-background-position.html\" target=\"_top\" title=\"CSS background-position 属性\">\n",
      "        background-position\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-background-repeat.html\" target=\"_top\" title=\"CSS background-repeat 属性\">\n",
      "        background-repeat\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-background-size.html\" target=\"_top\" title=\"CSS3 background-size 属性\">\n",
      "        background-size\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-border.html\" target=\"_top\" title=\"CSS border 属性\">\n",
      "        border\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-border-bottom.html\" target=\"_top\" title=\"CSS border-bottom 属性\">\n",
      "        border-bottom\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-border-bottom-color.html\" target=\"_top\" title=\"CSS border-bottom-color 属性\">\n",
      "        border-bottom-color\n",
      "       </a>\n",
      "       <a href=\"css3-pr-border-bottom-left-radius.html\" target=\"_top\">\n",
      "        border-bottom-left-radius\n",
      "       </a>\n",
      "       <a href=\"css3-pr-border-bottom-right-radius.html\" target=\"_top\">\n",
      "        border-bottom-right-radius\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-border-bottom-style.html\" target=\"_top\" title=\"CSS border-bottom-style 属性\">\n",
      "        border-bottom-style\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-border-bottom-width.html\" target=\"_top\" title=\"CSS border-bottom-width 属性\">\n",
      "        border-bottom-width\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-border-collapse.html\" target=\"_top\" title=\"CSS border-collapse 属性\">\n",
      "        border-collapse\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-border-color.html\" target=\"_top\" title=\"CSS border-color 属性\">\n",
      "        border-color\n",
      "       </a>\n",
      "       <a href=\"css3-pr-border-image.html\" target=\"_top\">\n",
      "        border-image\n",
      "       </a>\n",
      "       <a href=\"css3-pr-border-image-outset.html\" target=\"_top\">\n",
      "        border-image-outset\n",
      "       </a>\n",
      "       <a href=\"css3-pr-border-image-repeat.html\" target=\"_top\">\n",
      "        border-image-repeat\n",
      "       </a>\n",
      "       <a href=\"css3-pr-border-image-slice.html\" target=\"_top\">\n",
      "        border-image-slice\n",
      "       </a>\n",
      "       <a href=\"css3-pr-border-image-source.html\" target=\"_top\">\n",
      "        border-image-source\n",
      "       </a>\n",
      "       <a href=\"css3-pr-border-image-width.html\" target=\"_top\">\n",
      "        border-image-width\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-border-left.html\" target=\"_top\" title=\"CSS Border-left 属性\">\n",
      "        border-left\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-border-left-color.html\" target=\"_top\" title=\"CSS border-left-color 属性\">\n",
      "        border-left-color\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-border-left-style.html\" target=\"_top\" title=\"CSS border-left-style 属性\">\n",
      "        border-left-style\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-border-left-width.html\" target=\"_top\" title=\"CSS border-left-width 属性\">\n",
      "        border-left-width\n",
      "       </a>\n",
      "       <a href=\"css3-pr-border-radius.html\" target=\"_top\">\n",
      "        border-radius\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-border-righ.html\" target=\"_top\" title=\"CSS border-right 属性\">\n",
      "        border-right\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-border-right-color.html\" target=\"_top\" title=\"CSS border-right-color 属性\">\n",
      "        border-right-color\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-border-right-style.html\" target=\"_top\" title=\"CSS border-right-style 属性\">\n",
      "        border-right-style\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-border-right-width.html\" target=\"_top\" title=\"CSS border-right-width 属性\">\n",
      "        border-right-width\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-border-spacing.html\" target=\"_top\" title=\"CSS border-spacing 属性\">\n",
      "        border-spacing\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-border-style.html\" target=\"_top\" title=\"CSS border-style 属性\">\n",
      "        border-style\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-border-top.html\" target=\"_top\" title=\"CSS border-top 属性\">\n",
      "        border-top\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-border-top-color.html\" target=\"_top\" title=\"CSS border-top-color 属性\">\n",
      "        border-top-color\n",
      "       </a>\n",
      "       <a href=\"css3-pr-border-top-left-radius.html\" target=\"_top\">\n",
      "        border-top-left-radius\n",
      "       </a>\n",
      "       <a href=\"css3-pr-border-top-right-radius.html\" target=\"_top\">\n",
      "        border-top-right-radius\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-border-top-style.html\" target=\"_top\" title=\"CSS border-top-style 属性\">\n",
      "        border-top-style\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-border-top-width.html\" target=\"_top\" title=\"CSS border-top-width 属性\">\n",
      "        border-top-width\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-border-width.html\" target=\"_top\" title=\"CSS border-width 属性\">\n",
      "        border-width\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-pos-bottom.html\" target=\"_top\" title=\"CSS bottom 属性\">\n",
      "        bottom\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-box-align.html\" target=\"_top\" title=\"CSS3 box-align 属性\">\n",
      "        box-align\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-box-direction.html\" target=\"_top\" title=\"CSS3 box-direction 属性\">\n",
      "        box-direction\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-box-flex.html\" target=\"_top\" title=\"CSS3 box-flex 属性\">\n",
      "        box-flex\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-box-flex-group.html\" target=\"_top\" title=\"CSS3 box-flex-group 属性\">\n",
      "        box-flex-group\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-box-lines.html\" target=\"_top\" title=\"CSS3 box-lines 属性\">\n",
      "        box-lines\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-box-ordinal-group.html\" target=\"_top\" title=\"CSS3 box-ordinal-group 属性\">\n",
      "        box-ordinal-group\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-box-orient.html\" target=\"_top\" title=\"CSS3 box-orient 属性\">\n",
      "        box-orient\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-box-pack.html\" target=\"_top\" title=\"CSS3 box-pack 属性\">\n",
      "        box-pack\n",
      "       </a>\n",
      "       <a href=\"css3-pr-box-shadow.html\" target=\"_top\">\n",
      "        box-shadow\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-box-sizing.html\" target=\"_top\" title=\"CSS3 box-sizing 属性\">\n",
      "        box-sizing\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-tab-caption-side.html\" target=\"_top\" title=\"CSS caption-side 属性\">\n",
      "        caption-side\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-class-clear.html\" target=\"_top\" title=\"CSS clear 属性\">\n",
      "        clear\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-pos-clip.html\" target=\"_top\" title=\"CSS clip 属性\">\n",
      "        clip\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-text-color.html\" target=\"_top\" title=\"CSS color 属性\">\n",
      "        color\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-column-count.html\" target=\"_top\" title=\"CSS3 column-count 属性\">\n",
      "        column-count\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-column-fill.html\" target=\"_top\" title=\"CSS3 column-fill 属性\">\n",
      "        column-fill\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-column-gap.html\" target=\"_top\" title=\"CSS3 column-gap 属性\">\n",
      "        column-gap\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-column-rule.html\" target=\"_top\" title=\"CSS3 column-rule 属性\">\n",
      "        column-rule\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-column-rule-color.html\" target=\"_top\" title=\"CSS3 column-rule-color 属性\">\n",
      "        column-rule-color\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-column-rule-style.html\" target=\"_top\" title=\"CSS3 column-rule-style 属性\">\n",
      "        column-rule-style\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-column-rule-width.html\" target=\"_top\" title=\"CSS3 column-rule-width 属性\">\n",
      "        column-rule-width\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-column-span.html\" target=\"_top\" title=\"CSS3 column-span 属性\">\n",
      "        column-span\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-column-width.html\" target=\"_top\" title=\"CSS3 column-width 属性\">\n",
      "        column-width\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-columns.html\" target=\"_top\" title=\"CSS3 columns 属性\">\n",
      "        columns\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-gen-content.html\" target=\"_top\" title=\"CSS content 属性\">\n",
      "        content\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-gen-counter-increment.html\" target=\"_top\" title=\"CSS counter-increment 属性\">\n",
      "        counter-increment\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-gen-counter-reset.html\" target=\"_top\" title=\"CSS counter-reset 属性\">\n",
      "        counter-reset\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-class-cursor.html\" target=\"_top\" title=\"CSS cursor 属性\">\n",
      "        cursor\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-text-direction.html\" target=\"_top\" title=\"CSS direction 属性\">\n",
      "        direction\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-class-display.html\" target=\"_top\" title=\"CSS display 属性\">\n",
      "        display\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-tab-empty-cellsp.html\" target=\"_top\" title=\"CSS Empty-cells 属性\">\n",
      "        empty-cells\n",
      "       </a>\n",
      "       <a href=\"css3-pr-filter.html\" target=\"_top\">\n",
      "        filter\n",
      "       </a>\n",
      "       <a href=\"css3-pr-flex.html\" target=\"_top\">\n",
      "        flex\n",
      "       </a>\n",
      "       <a href=\"css3-pr-flex-basis.html\" target=\"_top\">\n",
      "        flex-basis\n",
      "       </a>\n",
      "       <a href=\"css3-pr-flex-direction.html\" target=\"_top\">\n",
      "        flex-direction\n",
      "       </a>\n",
      "       <a href=\"css3-pr-flex-flow.html\" target=\"_top\">\n",
      "        flex-flow\n",
      "       </a>\n",
      "       <a href=\"css3-pr-flex-grow.html\" target=\"_top\">\n",
      "        flex-grow\n",
      "       </a>\n",
      "       <a href=\"css3-pr-flex-shrink.html\" target=\"_top\">\n",
      "        flex-shrink\n",
      "       </a>\n",
      "       <a href=\"css3-pr-flex-wrap.html\" target=\"_top\">\n",
      "        flex-wrap\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-class-float.html\" target=\"_top\" title=\"CSS float 属性\">\n",
      "        float\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-font-font.html\" target=\"_top\" title=\"CSS font 属性\">\n",
      "        font\n",
      "       </a>\n",
      "       <a href=\"css3-pr-font-face-rule.html\" target=\"_top\">\n",
      "        @font-face\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-font-font-family.html\" target=\"_top\" title=\"CSS font-family 属性\">\n",
      "        font-family\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-font-font-size.html\" target=\"_top\" title=\"CSS font-size 属性\">\n",
      "        font-size\n",
      "       </a>\n",
      "       <a href=\"css3-pr-font-size-adjust.html\" target=\"_top\">\n",
      "        font-size-adjust\n",
      "       </a>\n",
      "       <a href=\"css3-pr-font-stretch.html\" target=\"_top\">\n",
      "        font-stretch\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-font-font-style.html\" target=\"_top\" title=\"CSS font-style 属性\">\n",
      "        font-style\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-font-font-variant.html\" target=\"_top\" title=\"CSS font-variant 属性\">\n",
      "        font-variant\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-font-weight.html\" target=\"_top\" title=\"CSS font-weight 属性\">\n",
      "        font-weight\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-grid-columns.html\" target=\"_top\" title=\"CSS3 grid-columns 属性\">\n",
      "        grid-columns\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-grid-rows.html\" target=\"_top\" title=\"CSS3 grid-rows 属性\">\n",
      "        grid-rows\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-hanging-punctuation.html\" target=\"_top\" title=\"CSS3 hanging-punctuation 属性\">\n",
      "        hanging-punctuation\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-dim-height.html\" target=\"_top\" title=\"CSS height 属性\">\n",
      "        height\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-icon.html\" target=\"_top\" title=\"CSS3 icon 属性\">\n",
      "        icon\n",
      "       </a>\n",
      "       <a href=\"css3-pr-justify-content.html\" target=\"_top\">\n",
      "        justify-content\n",
      "       </a>\n",
      "       <a href=\"css3-pr-animation-keyframes.html\" target=\"_top\">\n",
      "        @keyframes\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-pos-left.html\" target=\"_top\" title=\"CSS left 属性\">\n",
      "        left\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-text-letter-spacing.html\" target=\"_top\" title=\"CSS letter-spacing 属性\">\n",
      "        letter-spacing\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-dim-line-height.html\" target=\"_top\" title=\"CSS line-height 属性\">\n",
      "        line-height\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-list-style.html\" target=\"_top\" title=\"CSS list-style 属性\">\n",
      "        list-style\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-list-style-image.html\" target=\"_top\" title=\"CSS list-style-image 属性\">\n",
      "        list-style-image\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-list-style-position.html\" target=\"_top\" title=\"CSS list-style-position 属性\">\n",
      "        list-style-position\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-list-style-type.html\" target=\"_top\" title=\"CSS list-style-type 属性\">\n",
      "        list-style-type\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-margin.html\" target=\"_top\" title=\"CSS margin 属性\">\n",
      "        margin\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-margin-bottom.html\" target=\"_top\" title=\"CSS margin-bottom 属性\">\n",
      "        margin-bottom\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-margin-left.html\" target=\"_top\" title=\"CSS margin-left 属性\">\n",
      "        margin-left\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-margin-right.html\" target=\"_top\" title=\"CSS margin-right 属性\">\n",
      "        margin-right\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-margin-top.html\" target=\"_top\" title=\"CSS margin-top 属性\">\n",
      "        margin-top\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-dim-max-height.html\" target=\"_top\" title=\"CSS max-height 属性\">\n",
      "        max-height\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-dim-max-width.html\" target=\"_top\" title=\"CSS max-width 属性\">\n",
      "        max-width\n",
      "       </a>\n",
      "       <a href=\"css3-pr-mediaquery.html\" target=\"_top\" title=\"CSS3 @media\">\n",
      "        @media\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-dim-min-height.html\" target=\"_top\" title=\"CSS Min-height 属性\">\n",
      "        min-height\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-dim-min-width.html\" target=\"_top\" title=\"CSS min-width 属性\">\n",
      "        min-width\n",
      "       </a>\n",
      "       <a href=\"pr-mix-blend-mode.html\" target=\"_top\" title=\"CSS mix-blend-mode 属性\">\n",
      "        mix-blend-mode\n",
      "       </a>\n",
      "       <a href=\"pr-object-fit.html\" target=\"_top\" title=\"CSS object-fit 属性\">\n",
      "        object-fit\n",
      "       </a>\n",
      "       <a href=\"pr-object-position.html\" target=\"_top\" title=\"CSS object-position 属性\">\n",
      "        object-position\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-nav-down.html\" target=\"_top\" title=\"CSS3 nav-down 属性\">\n",
      "        nav-down\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-nav-index.html\" target=\"_top\" title=\"CSS3 nav-index 属性\">\n",
      "        nav-index\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-nav-left.html\" target=\"_top\" title=\"CSS3 nav-left 属性\">\n",
      "        nav-left\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-nav-right.html\" target=\"_top\" title=\"CSS nav-right 属性\">\n",
      "        nav-right\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-nav-up.html\" target=\"_top\" title=\"CSS3 nav-up 属性\">\n",
      "        nav-up\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-opacity.html\" target=\"_top\" title=\"CSS3 opacity 属性\">\n",
      "        opacity\n",
      "       </a>\n",
      "       <a href=\"css3-pr-order.html\" target=\"_top\">\n",
      "        order\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-outline.html\" target=\"_top\" title=\"CSS outline 属性\">\n",
      "        outline\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-outline-color.html\" target=\"_top\" title=\"CSS outline-color 属性\">\n",
      "        outline-color\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-outline-offset.html\" target=\"_top\" title=\"CSS3 outline-offset 属性\">\n",
      "        outline-offset\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-outline-style.html\" target=\"_top\" title=\"CSS outline-style 属性\">\n",
      "        outline-style\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-outline-width.html\" target=\"_top\" title=\"CSS Outline-width 属性\">\n",
      "        outline-width\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-pos-overflow.html\" target=\"_top\" title=\"CSS overflow 属性\">\n",
      "        overflow\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-overflow-x.html\" target=\"_top\" title=\"CSS3 overflow-x 属性\">\n",
      "        overflow-x\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-overflow-y.html\" target=\"_top\" title=\"CSS3 overflow-y 属性\">\n",
      "        overflow-y\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-padding.html\" target=\"_top\" title=\"CSS padding 属性\">\n",
      "        padding\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-padding-bottom.html\" target=\"_top\" title=\"CSS Padding-bottom 属性\">\n",
      "        padding-bottom\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-padding-left.html\" target=\"_top\" title=\"CSS padding-left 属性\">\n",
      "        padding-left\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-padding-right.html\" target=\"_top\" title=\"CSS padding-right 属性\">\n",
      "        padding-right\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-padding-top.html\" target=\"_top\" title=\"CSS padding-top 属性\">\n",
      "        padding-top\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-print-pageba.html\" target=\"_top\" title=\"CSS Page-break-after 属性\">\n",
      "        page-break-after\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-print-pagebb.html\" target=\"_top\" title=\"CSS page-break-before 属性\">\n",
      "        page-break-before\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-print-pagebi.html\" target=\"_top\" title=\"CSS page-break-inside 属性\">\n",
      "        page-break-inside\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-perspective.html\" target=\"_top\" title=\"CSS3 perspective 属性\">\n",
      "        perspective\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-perspective-origin.html\" target=\"_top\" title=\"CSS3 perspective-origin 属性\">\n",
      "        perspective-origin\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-class-position.html\" target=\"_top\" title=\"CSS position 属性\">\n",
      "        position\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-punctuation-trim.html\" target=\"_top\" title=\"CSS3 punctuation-trim 属性\">\n",
      "        punctuation-trim\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-gen-quotes.html\" target=\"_top\" title=\"CSS quotes 属性\">\n",
      "        quotes\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-resize.html\" target=\"_top\" title=\"CSS3 resize 属性\">\n",
      "        resize\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-pos-right.html\" target=\"_top\" title=\"CSS right 属性\">\n",
      "        right\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-rotation.html\" target=\"_top\" title=\"CSS3 rotation 属性\">\n",
      "        rotation\n",
      "       </a>\n",
      "       <a href=\"css3-pr-tab-size.html\" target=\"_top\">\n",
      "        tab-size\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-tab-table-layout.html\" target=\"_top\" title=\"CSS table-layout 属性\">\n",
      "        table-layout\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-target.html\" target=\"_top\" title=\"CSS3 target 属性\">\n",
      "        target\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-target-name.html\" target=\"_top\" title=\"CSS3 target-name 属性\">\n",
      "        target-name\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-target-new.html\" target=\"_top\" title=\"CSS3 target-new 属性\">\n",
      "        target-new\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-target-position.html\" target=\"_top\" title=\"CSS3 target-position 属性\">\n",
      "        target-position\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-text-text-align.html\" target=\"_top\" title=\"CSS text-align 属性\">\n",
      "        text-align\n",
      "       </a>\n",
      "       <a href=\"css3-pr-text-align-last.html\" target=\"_top\">\n",
      "        text-align-last\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-text-text-decoration.html\" target=\"_top\" title=\"CSS text-decoration 属性\">\n",
      "        text-decoration\n",
      "       </a>\n",
      "       <a href=\"css3-pr-text-decoration-color.html\" target=\"_top\">\n",
      "        text-decoration-color\n",
      "       </a>\n",
      "       <a href=\"css3-pr-text-decoration-line.html\" target=\"_top\">\n",
      "        text-decoration-line\n",
      "       </a>\n",
      "       <a href=\"css3-pr-text-decoration-style.html\" target=\"_top\">\n",
      "        text-decoration-style\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-text-text-indent.html\" target=\"_top\" title=\"CSS text-indent 属性\">\n",
      "        text-indent\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-text-justify.html\" target=\"_top\" title=\"CSS3 text-justify 属性\">\n",
      "        text-justify\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-text-outline.html\" target=\"_top\" title=\"CSS3 text-outline 属性\">\n",
      "        text-outline\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-text-overflow.html\" target=\"_top\" title=\"CSS3 text-overflow 属性\">\n",
      "        text-overflow\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-text-shadow.html\" target=\"_top\" title=\"CSS3 text-shadow 属性\">\n",
      "        text-shadow\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-text-text-transform.html\" target=\"_top\" title=\"CSS text-transform 属性\">\n",
      "        text-transform\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-text-wrap.html\" target=\"_top\" title=\"CSS3 text-wrap 属性\">\n",
      "        text-wrap\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-pos-top.html\" target=\"_top\" title=\"CSS top 属性\">\n",
      "        top\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-transform.html\" target=\"_top\" title=\"CSS3 transform 属性\">\n",
      "        transform\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-transform-origin.html\" target=\"_top\" title=\"CSS3 transform-origin 属性\">\n",
      "        transform-origin\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-transform-style.html\" target=\"_top\" title=\"CSS3 transform-style 属性\">\n",
      "        transform-style\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-transition.html\" target=\"_top\" title=\"CSS3 transition 属性\">\n",
      "        transition\n",
      "       </a>\n",
      "       <a href=\"css3-pr-transition-delay.html\" target=\"_top\">\n",
      "        transition-delay\n",
      "       </a>\n",
      "       <a href=\"css3-pr-transition-duration.html\" target=\"_top\">\n",
      "        transition-duration\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-transition-property.html\" target=\"_top\" title=\"CSS3 transition-property 属性\">\n",
      "        transition-property\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-transition-timing-function.html\" target=\"_top\" title=\"CSS3 transition-timing-function 属性\">\n",
      "        transition-timing-function\n",
      "       </a>\n",
      "       <a href=\"pr-text-unicode-bidi.html\" target=\"_top\">\n",
      "        unicode-bidi\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-pos-vertical-align.html\" target=\"_top\" title=\"CSS vertical-align 属性\">\n",
      "        vertical-align\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-class-visibility.html\" target=\"_top\" title=\"CSS visibility 属性\">\n",
      "        visibility\n",
      "       </a>\n",
      "       <a href=\"pr-text-white-space.html\" target=\"_top\">\n",
      "        white-space\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-dim-width.html\" target=\"_top\" title=\"CSS width 属性\">\n",
      "        width\n",
      "       </a>\n",
      "       <a href=\"css3-pr-word-break.html\" target=\"_top\">\n",
      "        word-break\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-text-word-spacing.html\" target=\"_top\" title=\"CSS word-spacing 属性\">\n",
      "        word-spacing\n",
      "       </a>\n",
      "       <a href=\"/cssref/css3-pr-word-wrap.html\" target=\"_top\" title=\"CSS3 word-wrap 属性\">\n",
      "        word-wrap\n",
      "       </a>\n",
      "       <a href=\"/cssref/pr-pos-z-index.html\" target=\"_top\" title=\"CSS z-index 属性\">\n",
      "        z-index\n",
      "       </a>\n",
      "       <a href=\"/cssref/css-pr-writing-mode.html\" target=\"_top\" title=\"CSS writing-mode 属性\">\n",
      "        writing-mode\n",
      "       </a>\n",
      "      </div>\n",
      "     </div>\n",
      "    </div>\n",
      "    <div class=\"col middle-column\">\n",
      "     <div class=\"article\">\n",
      "      <div class=\"article-heading-ad\" style=\"display: none;\">\n",
      "      </div>\n",
      "      <div class=\"previous-next-links\">\n",
      "       <div class=\"previous-design-link\">\n",
      "        <i aria-hidden=\"true\" class=\"fa fa-arrow-left\" style=\"font-size:16px;\">\n",
      "        </i>\n",
      "        <a href=\"http://www.runoob.com/cssref/css-reference.html\" rel=\"prev\">\n",
      "         CSS 参考手册\n",
      "        </a>\n",
      "       </div>\n",
      "       <div class=\"next-design-link\">\n",
      "        <a href=\"http://www.runoob.com/cssref/css-ref-aural.html\" rel=\"next\">\n",
      "         CSS 听觉参考手册\n",
      "        </a>\n",
      "        <i aria-hidden=\"true\" class=\"fa fa-arrow-right\" style=\"font-size:16px;\">\n",
      "        </i>\n",
      "       </div>\n",
      "      </div>\n",
      "      <div class=\"article-body\">\n",
      "       <div class=\"article-intro\" id=\"content\">\n",
      "        <h1>\n",
      "         CSS\n",
      "         <span class=\"color_h1\">\n",
      "          选择器\n",
      "         </span>\n",
      "        </h1>\n",
      "        <hr/>\n",
      "        <p class=\"elem_d11\">\n",
      "         CSS选择器用于选择你想要的元素的样式的模式。\n",
      "        </p>\n",
      "        <p class=\"elem_d11\">\n",
      "         \"CSS\"列表示在CSS版本的属性定义（CSS1，CSS2，或对CSS3）。\n",
      "        </p>\n",
      "        <table class=\"reference\">\n",
      "         <tbody>\n",
      "          <tr>\n",
      "           <th align=\"left\" width=\"22%\">\n",
      "            选择器\n",
      "           </th>\n",
      "           <th align=\"left\" width=\"17%\">\n",
      "            示例\n",
      "           </th>\n",
      "           <th align=\"left\" width=\"56%\">\n",
      "            示例说明\n",
      "           </th>\n",
      "           <th align=\"left\">\n",
      "            CSS\n",
      "           </th>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-class.html\">\n",
      "             .\n",
      "             <i>\n",
      "              class\n",
      "             </i>\n",
      "            </a>\n",
      "           </td>\n",
      "           <td class=\"notranslate\">\n",
      "            .intro\n",
      "           </td>\n",
      "           <td>\n",
      "            选择所有class=\"intro\"的元素\n",
      "           </td>\n",
      "           <td>\n",
      "            1\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-id.html\">\n",
      "             #\n",
      "             <i>\n",
      "              id\n",
      "             </i>\n",
      "            </a>\n",
      "           </td>\n",
      "           <td class=\"notranslate\">\n",
      "            #firstname\n",
      "           </td>\n",
      "           <td>\n",
      "            选择所有id=\"firstname\"的元素\n",
      "           </td>\n",
      "           <td>\n",
      "            1\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-all.html\">\n",
      "             *\n",
      "            </a>\n",
      "           </td>\n",
      "           <td class=\"code notranslate\">\n",
      "            *\n",
      "           </td>\n",
      "           <td>\n",
      "            选择所有元素\n",
      "           </td>\n",
      "           <td>\n",
      "            2\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <i>\n",
      "             <a href=\"sel-element.html\">\n",
      "              element\n",
      "             </a>\n",
      "            </i>\n",
      "           </td>\n",
      "           <td class=\"notranslate\">\n",
      "            p\n",
      "           </td>\n",
      "           <td>\n",
      "            选择所有&lt;p&gt;元素\n",
      "           </td>\n",
      "           <td>\n",
      "            1\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <i>\n",
      "             <a href=\"sel-element-comma.html\">\n",
      "              element,element\n",
      "             </a>\n",
      "            </i>\n",
      "           </td>\n",
      "           <td class=\"notranslate\">\n",
      "            div,p\n",
      "           </td>\n",
      "           <td>\n",
      "            选择所有&lt;div&gt;元素和&lt;p&gt;元素\n",
      "           </td>\n",
      "           <td>\n",
      "            1\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-element-element.html\">\n",
      "             <i>\n",
      "              element\n",
      "             </i>\n",
      "             <i>\n",
      "              element\n",
      "             </i>\n",
      "            </a>\n",
      "           </td>\n",
      "           <td class=\"notranslate\">\n",
      "            div p\n",
      "           </td>\n",
      "           <td>\n",
      "            选择&lt;div&gt;元素内的所有&lt;p&gt;元素\n",
      "           </td>\n",
      "           <td>\n",
      "            1\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-element-gt.html\">\n",
      "             <i>\n",
      "              element\n",
      "             </i>\n",
      "             &gt;\n",
      "             <i>\n",
      "              element\n",
      "             </i>\n",
      "            </a>\n",
      "           </td>\n",
      "           <td class=\"notranslate\">\n",
      "            div&gt;p\n",
      "           </td>\n",
      "           <td>\n",
      "            选择所有父级是 &lt;div&gt; 元素的 &lt;p&gt; 元素\n",
      "           </td>\n",
      "           <td>\n",
      "            2\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-element-pluss.html\">\n",
      "             <i>\n",
      "              element\n",
      "             </i>\n",
      "             +\n",
      "             <i>\n",
      "              element\n",
      "             </i>\n",
      "            </a>\n",
      "           </td>\n",
      "           <td class=\"notranslate\">\n",
      "            div+p\n",
      "           </td>\n",
      "           <td>\n",
      "            选择所有紧接着&lt;div&gt;元素之后的&lt;p&gt;元素\n",
      "           </td>\n",
      "           <td>\n",
      "            2\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-attribute.html\">\n",
      "             [\n",
      "             <i>\n",
      "              attribute\n",
      "             </i>\n",
      "             ]\n",
      "            </a>\n",
      "           </td>\n",
      "           <td class=\"notranslate\">\n",
      "            [target]\n",
      "           </td>\n",
      "           <td>\n",
      "            选择所有带有target属性元素\n",
      "           </td>\n",
      "           <td>\n",
      "            2\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-attribute-value.html\">\n",
      "             [\n",
      "             <i>\n",
      "              attribute\n",
      "             </i>\n",
      "             =\n",
      "             <i>\n",
      "              value\n",
      "             </i>\n",
      "             ]\n",
      "            </a>\n",
      "           </td>\n",
      "           <td class=\"notranslate\">\n",
      "            [target=-blank]\n",
      "           </td>\n",
      "           <td>\n",
      "            选择所有使用target=\"-blank\"的元素\n",
      "           </td>\n",
      "           <td>\n",
      "            2\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-attribute-value-contains.html\">\n",
      "             [\n",
      "             <i>\n",
      "              attribute\n",
      "             </i>\n",
      "             ~=\n",
      "             <i>\n",
      "              value\n",
      "             </i>\n",
      "             ]\n",
      "            </a>\n",
      "           </td>\n",
      "           <td class=\"notranslate\">\n",
      "            [title~=flower]\n",
      "           </td>\n",
      "           <td>\n",
      "            选择标题属性包含单词\"flower\"的所有元素\n",
      "           </td>\n",
      "           <td>\n",
      "            2\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-attribute-value-lang.html\">\n",
      "             [\n",
      "             <i>\n",
      "              attribute\n",
      "             </i>\n",
      "             |=\n",
      "             <i>\n",
      "              language\n",
      "             </i>\n",
      "             ]\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            [lang|=en]\n",
      "           </td>\n",
      "           <td>\n",
      "            选择 lang 属性以 en 为开头的所有元素\n",
      "           </td>\n",
      "           <td>\n",
      "            2\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-link.html\">\n",
      "             :link\n",
      "            </a>\n",
      "           </td>\n",
      "           <td class=\"notranslate\">\n",
      "            a:link\n",
      "           </td>\n",
      "           <td>\n",
      "            选择所有未访问链接\n",
      "           </td>\n",
      "           <td>\n",
      "            1\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-visited.html\">\n",
      "             :visited\n",
      "            </a>\n",
      "           </td>\n",
      "           <td class=\"notranslate\">\n",
      "            a:visited\n",
      "           </td>\n",
      "           <td>\n",
      "            选择所有访问过的链接\n",
      "           </td>\n",
      "           <td>\n",
      "            1\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-active.html\">\n",
      "             :active\n",
      "            </a>\n",
      "           </td>\n",
      "           <td class=\"notranslate\">\n",
      "            a:active\n",
      "           </td>\n",
      "           <td>\n",
      "            选择活动链接\n",
      "           </td>\n",
      "           <td>\n",
      "            1\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-hover.html\">\n",
      "             :hover\n",
      "            </a>\n",
      "           </td>\n",
      "           <td class=\"notranslate\">\n",
      "            a:hover\n",
      "           </td>\n",
      "           <td>\n",
      "            选择鼠标在链接上面时\n",
      "           </td>\n",
      "           <td>\n",
      "            1\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-focus.html\">\n",
      "             :focus\n",
      "            </a>\n",
      "           </td>\n",
      "           <td class=\"notranslate\">\n",
      "            input:focus\n",
      "           </td>\n",
      "           <td>\n",
      "            选择具有焦点的输入元素\n",
      "           </td>\n",
      "           <td>\n",
      "            2\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-firstletter.html\">\n",
      "             :first-letter\n",
      "            </a>\n",
      "           </td>\n",
      "           <td class=\"notranslate\">\n",
      "            p:first-letter\n",
      "           </td>\n",
      "           <td>\n",
      "            选择每一个&lt;p&gt;元素的第一个字母\n",
      "           </td>\n",
      "           <td>\n",
      "            1\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-firstline.html\">\n",
      "             :first-line\n",
      "            </a>\n",
      "           </td>\n",
      "           <td class=\"notranslate\">\n",
      "            p:first-line\n",
      "           </td>\n",
      "           <td>\n",
      "            选择每一个&lt;p&gt;元素的第一行\n",
      "           </td>\n",
      "           <td>\n",
      "            1\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-firstchild.html\">\n",
      "             :first-child\n",
      "            </a>\n",
      "           </td>\n",
      "           <td class=\"notranslate\">\n",
      "            p:first-child\n",
      "           </td>\n",
      "           <td>\n",
      "            指定只有当&lt;p&gt;元素是其父级的第一个子级的样式。\n",
      "           </td>\n",
      "           <td>\n",
      "            2\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-before.html\">\n",
      "             :before\n",
      "            </a>\n",
      "           </td>\n",
      "           <td class=\"notranslate\">\n",
      "            p:before\n",
      "           </td>\n",
      "           <td>\n",
      "            在每个&lt;p&gt;元素之前插入内容\n",
      "           </td>\n",
      "           <td>\n",
      "            2\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-after.html\">\n",
      "             :after\n",
      "            </a>\n",
      "           </td>\n",
      "           <td class=\"notranslate\">\n",
      "            p:after\n",
      "           </td>\n",
      "           <td>\n",
      "            在每个&lt;p&gt;元素之后插入内容\n",
      "           </td>\n",
      "           <td>\n",
      "            2\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-lang.html\">\n",
      "             :lang(\n",
      "             <i>\n",
      "              language\n",
      "             </i>\n",
      "             )\n",
      "            </a>\n",
      "           </td>\n",
      "           <td class=\"notranslate\">\n",
      "            p:lang(it)\n",
      "           </td>\n",
      "           <td>\n",
      "            选择一个lang属性的起始值=\"it\"的所有&lt;p&gt;元素\n",
      "           </td>\n",
      "           <td>\n",
      "            2\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-gen-sibling.html\">\n",
      "             <i>\n",
      "              element1\n",
      "             </i>\n",
      "             ~\n",
      "             <i>\n",
      "              element2\n",
      "             </i>\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            p~ul\n",
      "           </td>\n",
      "           <td>\n",
      "            选择p元素之后的每一个ul元素\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-attr-begin.html\">\n",
      "             [\n",
      "             <i>\n",
      "              attribute\n",
      "             </i>\n",
      "             ^=\n",
      "             <i>\n",
      "              value\n",
      "             </i>\n",
      "             ]\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            a[src^=\"https\"]\n",
      "           </td>\n",
      "           <td>\n",
      "            选择每一个src属性的值以\"https\"开头的元素\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-attr-end.html\">\n",
      "             [\n",
      "             <i>\n",
      "              attribute\n",
      "             </i>\n",
      "             $=\n",
      "             <i>\n",
      "              value\n",
      "             </i>\n",
      "             ]\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            a[src$=\".pdf\"]\n",
      "           </td>\n",
      "           <td>\n",
      "            选择每一个src属性的值以\".pdf\"结尾的元素\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-attr-contain.html\">\n",
      "             [\n",
      "             <i>\n",
      "              attribute\n",
      "             </i>\n",
      "             *=\n",
      "             <i>\n",
      "              value\n",
      "             </i>\n",
      "             ]\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            a[src*=\"runoob\"]\n",
      "           </td>\n",
      "           <td>\n",
      "            选择每一个src属性的值包含子字符串\"runoob\"的元素\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-first-of-type.html\">\n",
      "             :first-of-type\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            p:first-of-type\n",
      "           </td>\n",
      "           <td>\n",
      "            选择每个p元素是其父级的第一个p元素\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-last-of-type.html\">\n",
      "             :last-of-type\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            p:last-of-type\n",
      "           </td>\n",
      "           <td>\n",
      "            选择每个p元素是其父级的最后一个p元素\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-only-of-type.html\">\n",
      "             :only-of-type\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            p:only-of-type\n",
      "           </td>\n",
      "           <td>\n",
      "            选择每个p元素是其父级的唯一p元素\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-only-child.html\">\n",
      "             :only-child\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            p:only-child\n",
      "           </td>\n",
      "           <td>\n",
      "            选择每个p元素是其父级的唯一子元素\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-nth-child.html\">\n",
      "             :nth-child(\n",
      "             <i>\n",
      "              n\n",
      "             </i>\n",
      "             )\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            p:nth-child(2)\n",
      "           </td>\n",
      "           <td>\n",
      "            选择每个p元素是其父级的第二个子元素\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-nth-last-child.html\">\n",
      "             :nth-last-child(\n",
      "             <i>\n",
      "              n\n",
      "             </i>\n",
      "             )\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            p:nth-last-child(2)\n",
      "           </td>\n",
      "           <td>\n",
      "            选择每个p元素的是其父级的第二个子元素，从最后一个子项计数\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-nth-of-type.html\">\n",
      "             :nth-of-type(\n",
      "             <i>\n",
      "              n\n",
      "             </i>\n",
      "             )\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            p:nth-of-type(2)\n",
      "           </td>\n",
      "           <td>\n",
      "            选择每个p元素是其父级的第二个p元素\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-nth-last-of-type.html\">\n",
      "             :nth-last-of-type(\n",
      "             <i>\n",
      "              n\n",
      "             </i>\n",
      "             )\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            p:nth-last-of-type(2)\n",
      "           </td>\n",
      "           <td>\n",
      "            选择每个p元素的是其父级的第二个p元素，从最后一个子项计数\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-last-child.html\">\n",
      "             :last-child\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            p:last-child\n",
      "           </td>\n",
      "           <td>\n",
      "            选择每个p元素是其父级的最后一个子级。\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-root.html\">\n",
      "             :root\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            :root\n",
      "           </td>\n",
      "           <td>\n",
      "            选择文档的根元素\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-empty.html\">\n",
      "             :empty\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            p:empty\n",
      "           </td>\n",
      "           <td>\n",
      "            选择每个没有任何子级的p元素（包括文本节点）\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-target.html\">\n",
      "             :target\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            #news:target\n",
      "           </td>\n",
      "           <td>\n",
      "            选择当前活动的#news元素（包含该锚名称的点击的URL）\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-enabled.html\">\n",
      "             :enabled\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            input:enabled\n",
      "           </td>\n",
      "           <td>\n",
      "            选择每一个已启用的输入元素\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-disabled.html\">\n",
      "             :disabled\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            input:disabled\n",
      "           </td>\n",
      "           <td>\n",
      "            选择每一个禁用的输入元素\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-checked.html\">\n",
      "             :checked\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            input:checked\n",
      "           </td>\n",
      "           <td>\n",
      "            选择每个选中的输入元素\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-not.html\">\n",
      "             :not(\n",
      "             <i>\n",
      "              selector\n",
      "             </i>\n",
      "             )\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            :not(p)\n",
      "           </td>\n",
      "           <td>\n",
      "            选择每个并非p元素的元素\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-selection.html\">\n",
      "             ::selection\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            ::selection\n",
      "           </td>\n",
      "           <td>\n",
      "            匹配元素中被用户选中或处于高亮状态的部分\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-out-of-range.html\">\n",
      "             :out-of-range\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            :out-of-range\n",
      "           </td>\n",
      "           <td>\n",
      "            匹配值在指定区间之外的input元素\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-in-range.html\">\n",
      "             :in-range\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            :in-range\n",
      "           </td>\n",
      "           <td>\n",
      "            匹配值在指定区间之内的input元素\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-read-write.html\">\n",
      "             :read-write\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            :read-write\n",
      "           </td>\n",
      "           <td>\n",
      "            用于匹配可读及可写的元素\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-read-only.html\">\n",
      "             :read-only\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            :read-only\n",
      "           </td>\n",
      "           <td>\n",
      "            用于匹配设置 \"readonly\"（只读） 属性的元素\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-optional.html\">\n",
      "             :optional\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            :optional\n",
      "           </td>\n",
      "           <td>\n",
      "            用于匹配可选的输入元素\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-required.html\">\n",
      "             :required\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            :required\n",
      "           </td>\n",
      "           <td>\n",
      "            用于匹配设置了 \"required\" 属性的元素\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-valid.html\">\n",
      "             :valid\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            :valid\n",
      "           </td>\n",
      "           <td>\n",
      "            用于匹配输入值为合法的元素\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "          <tr>\n",
      "           <td>\n",
      "            <a href=\"sel-invalid.html\">\n",
      "             :invalid\n",
      "            </a>\n",
      "           </td>\n",
      "           <td>\n",
      "            :invalid\n",
      "           </td>\n",
      "           <td>\n",
      "            用于匹配输入值为非法的元素\n",
      "           </td>\n",
      "           <td>\n",
      "            3\n",
      "           </td>\n",
      "          </tr>\n",
      "         </tbody>\n",
      "        </table>\n",
      "        <!-- 其他扩展 -->\n",
      "       </div>\n",
      "      </div>\n",
      "      <div class=\"previous-next-links\">\n",
      "       <div class=\"previous-design-link\">\n",
      "        <i aria-hidden=\"true\" class=\"fa fa-arrow-left\" style=\"font-size:16px;\">\n",
      "        </i>\n",
      "        <a href=\"http://www.runoob.com/cssref/css-reference.html\" rel=\"prev\">\n",
      "         CSS 参考手册\n",
      "        </a>\n",
      "       </div>\n",
      "       <div class=\"next-design-link\">\n",
      "        <a href=\"http://www.runoob.com/cssref/css-ref-aural.html\" rel=\"next\">\n",
      "         CSS 听觉参考手册\n",
      "        </a>\n",
      "        <i aria-hidden=\"true\" class=\"fa fa-arrow-right\" style=\"font-size:16px;\">\n",
      "        </i>\n",
      "       </div>\n",
      "      </div>\n",
      "      <!-- 笔记列表 -->\n",
      "      <style>\n",
      "       .wrapper {\r\n",
      "  /*text-transform: uppercase; */\r\n",
      "  background: #ececec;\r\n",
      "  color: #555;\r\n",
      "  cursor: help;\r\n",
      "  font-family: \"Gill Sans\", Impact, sans-serif;\r\n",
      "  font-size: 20px;\r\n",
      "  position: relative;\r\n",
      "  text-align: center;\r\n",
      "  width: 200px;\r\n",
      "  -webkit-transform: translateZ(0); /* webkit flicker fix */\r\n",
      "  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */\r\n",
      "}\r\n",
      "\r\n",
      ".wrapper .tooltip {\r\n",
      "  white-space: nowrap;\r\n",
      "  font-size: 14px;\r\n",
      "  text-align: left;\r\n",
      "  background: #96b97d;\r\n",
      "  bottom: 100%;\r\n",
      "  color: #fff;\r\n",
      "  display: block;\r\n",
      "  left: -25px;\r\n",
      "  margin-bottom: 15px;\r\n",
      "  opacity: 0;\r\n",
      "  padding: 14px;\r\n",
      "  pointer-events: none;\r\n",
      "  position: absolute;\r\n",
      "  \r\n",
      "  -webkit-transform: translateY(10px);\r\n",
      "     -moz-transform: translateY(10px);\r\n",
      "      -ms-transform: translateY(10px);\r\n",
      "       -o-transform: translateY(10px);\r\n",
      "          transform: translateY(10px);\r\n",
      "  -webkit-transition: all .25s ease-out;\r\n",
      "     -moz-transition: all .25s ease-out;\r\n",
      "      -ms-transition: all .25s ease-out;\r\n",
      "       -o-transition: all .25s ease-out;\r\n",
      "          transition: all .25s ease-out;\r\n",
      "  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);\r\n",
      "     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);\r\n",
      "      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);\r\n",
      "       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);\r\n",
      "          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);\r\n",
      "}\r\n",
      ".tooltip a {\r\n",
      "\tcolor:#fff;\r\n",
      "}\r\n",
      "/* This bridges the gap so you can mouse into the tooltip without it disappearing */\r\n",
      ".wrapper .tooltip:before {\r\n",
      "  bottom: -20px;\r\n",
      "  content: \" \";\r\n",
      "  display: block;\r\n",
      "  height: 20px;\r\n",
      "  left: 0;\r\n",
      "  position: absolute;\r\n",
      "  width: 100%;\r\n",
      "}  \r\n",
      "\r\n",
      "/* CSS Triangles - see Trevor's post */\r\n",
      ".wrapper .tooltip:after {\r\n",
      "  border-left: solid transparent 10px;\r\n",
      "  border-right: solid transparent 10px;\r\n",
      "  border-top: solid #96b97d 10px;\r\n",
      "  bottom: -10px;\r\n",
      "  content: \" \";\r\n",
      "  height: 0;\r\n",
      "  left: 20%;\r\n",
      "  margin-left: -13px;\r\n",
      "  position: absolute;\r\n",
      "  width: 0;\r\n",
      "}\r\n",
      ".wrapper .tooltip1 {\r\n",
      "\tmargin-left: 50px;\r\n",
      "\tpadding-top: 0px;\r\n",
      "}\r\n",
      "/*\r\n",
      ".wrapper:hover .tooltip {\r\n",
      "  opacity: 1;\r\n",
      "  pointer-events: auto;\r\n",
      "  -webkit-transform: translateY(0px);\r\n",
      "     -moz-transform: translateY(0px);\r\n",
      "      -ms-transform: translateY(0px);\r\n",
      "       -o-transform: translateY(0px);\r\n",
      "          transform: translateY(0px);\r\n",
      "}\r\n",
      "*/\r\n",
      "/* IE can just show/hide with no transition */\r\n",
      ".lte8 .wrapper .tooltip {\r\n",
      "  display: none;\r\n",
      "}\r\n",
      "\r\n",
      ".lte8 .wrapper:hover .tooltip {\r\n",
      "  display: block;\r\n",
      "}\n",
      "      </style>\n",
      "      <div class=\"no_webshot\" id=\"respond\">\n",
      "       <div class=\"comment-signarea\" style=\" padding: 20px 20px;\">\n",
      "        <h3 class=\"text-muted\" id=\"share_code\" style=\"color: #799961;\">\n",
      "         <i aria-hidden=\"true\" class=\"fa fa-pencil-square-o\">\n",
      "         </i>\n",
      "         点我分享笔记\n",
      "        </h3>\n",
      "        <!--\r\n",
      "\t<p style=\"font-size:14px;\">笔记需要是本篇文章的内容扩展！</p><br>\r\n",
      "\t<p style=\"font-size:12px;\"><a href=\"//www.runoob.com/tougao\" target=\"_blank\">文章投稿，可点击这里</a></p>\r\n",
      "\t<p style=\"font-size:14px;\"><a href=\"/w3cnote/runoob-user-test-intro.html#invite\" target=\"_blank\">注册邀请码获取方式</a></p>\r\n",
      "\t\t<h3 class=\"text-muted\"><i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i> 分享笔记前必须<a href=\"javascript:;\" class=\"runoob-pop\">登录</a>！</h3>\r\n",
      "\t\t<p><a href=\"/w3cnote/runoob-user-test-intro.html#invite\" target=\"_blank\">注册邀请码获取方式</a></p>-->\n",
      "       </div>\n",
      "       <form action=\"/wp-content/themes/runoob/option/addnote.php\" id=\"commentform\" method=\"post\" style=\"display:none;\">\n",
      "        <div class=\"comt\">\n",
      "         <div class=\"comt-title\">\n",
      "          <i aria-hidden=\"true\" class=\"fa fa-user-circle\" style=\"font-size:36px;\">\n",
      "          </i>\n",
      "          <p>\n",
      "           <a href=\"javascript:;\" id=\"cancel-comment-reply-link\">\n",
      "            取消\n",
      "           </a>\n",
      "          </p>\n",
      "         </div>\n",
      "         <div class=\"comt-box\">\n",
      "          <div id=\"mded\">\n",
      "          </div>\n",
      "          <div class=\"comt-ctrl\">\n",
      "           <div class=\"comt-tips\">\n",
      "            <input id=\"comment_post_ID\" name=\"comment_post_ID\" type=\"hidden\" value=\"401\"/>\n",
      "            <input id=\"comment_parent\" name=\"comment_parent\" type=\"hidden\" value=\"0\"/>\n",
      "           </div>\n",
      "           <button id=\"submit\" name=\"submit\" tabindex=\"5\" type=\"submit\">\n",
      "            <i aria-hidden=\"true\" class=\"fa fa-pencil\">\n",
      "            </i>\n",
      "            分享笔记\n",
      "           </button>\n",
      "          </div>\n",
      "         </div>\n",
      "         <div class=\"comt-comterinfo\">\n",
      "          <ul id=\"comment-author-info\">\n",
      "           <li class=\"form-inline\">\n",
      "            <label class=\"hide\" for=\"author\">\n",
      "             昵称\n",
      "            </label>\n",
      "            <input class=\"ipt\" id=\"author\" name=\"author\" placeholder=\"昵称\" tabindex=\"2\" type=\"text\" value=\"\"/>\n",
      "            <span class=\"text-muted\">\n",
      "             昵称 (必填)\n",
      "            </span>\n",
      "           </li>\n",
      "           <li class=\"form-inline\">\n",
      "            <label class=\"hide\" for=\"email\">\n",
      "             邮箱\n",
      "            </label>\n",
      "            <input class=\"ipt\" id=\"email\" name=\"email\" placeholder=\"邮箱\" tabindex=\"3\" type=\"text\" value=\"\"/>\n",
      "            <span class=\"text-muted\">\n",
      "             邮箱 (必填)\n",
      "            </span>\n",
      "           </li>\n",
      "           <li class=\"form-inline\">\n",
      "            <label class=\"hide\" for=\"url\">\n",
      "             引用地址\n",
      "            </label>\n",
      "            <input class=\"ipt\" id=\"url\" name=\"url\" placeholder=\"引用地址\" tabindex=\"4\" type=\"text\" value=\"\"/>\n",
      "            <span class=\"text-muted\">\n",
      "             引用地址\n",
      "            </span>\n",
      "           </li>\n",
      "          </ul>\n",
      "         </div>\n",
      "        </div>\n",
      "       </form>\n",
      "      </div>\n",
      "      <script type=\"text/javascript\">\n",
      "       $(function() {\r\n",
      "\t//初始化编辑器\r\n",
      "\t\r\n",
      "\tvar editor = new Simditor({\r\n",
      "\t  textarea: $('#mded'),\r\n",
      "\t  placeholder: '写笔记...',\r\n",
      "\t  upload:false,\r\n",
      "\t // upload: {url:'/api/comment_upload_file.php',params: null,fileKey: 'upload_file',connectionCount: 1,leaveConfirm: '文件正在上传，您确定离开?'},\r\n",
      "\t  defaultImage: 'http://www.runoob.com/images/logo.png',\r\n",
      "\t  codeLanguages: '',\r\n",
      "\t  autosave: 'editor-content',\r\n",
      "\t  toolbar: [  'bold','code','ul','ol','image' ]\r\n",
      "\t});\r\n",
      "\teditor.on('selectionchanged', function() {\r\n",
      "\t\t$(\".code-popover\").hide();\r\n",
      "\t});\r\n",
      "\r\n",
      "\t// 提交数据\r\n",
      "\t$(\"#share_code\").click(function() {\r\n",
      "\t\t$(\".comment-signarea\").hide();\r\n",
      "\t\t$(\"#commentform\").show();\r\n",
      "\t\t\r\n",
      "\t});\r\n",
      "\t$(\"#user_add_note\").click(function() {\r\n",
      "\t\t$(\".comment-signarea\").hide();\r\n",
      "\t\t$(\"#commentform\").show();\r\n",
      "\t\t$('html, body').animate({\r\n",
      "       \t    scrollTop: $(\"#respond\").offset().top\r\n",
      "    \t}, 200);\r\n",
      "\t});\r\n",
      "\r\n",
      "\t// 提交笔记\r\n",
      "\tvar commentform=$('#commentform');\r\n",
      "\tcommentform.prepend('<div id=\"comment-status\" style=\"display:none;\" ></div>');\r\n",
      "\tvar statusdiv=$('#comment-status');\r\n",
      "\t\r\n",
      "\tcommentform.submit(function(e){\r\n",
      "\t\te.preventDefault();\r\n",
      "\t\tvar noteContent = editor.getValue();\r\n",
      "\t\t// console.log(noteContent);\r\n",
      "\t\tnoteContent = noteContent.replace(/<pre><code>/g,\"<pre>\");\r\n",
      "\t\tnoteContent = noteContent.replace(/<\\/code><\\/pre>/g,\"</pre>\");\r\n",
      "\t\t\r\n",
      "\t\t// 系列化表单数据\r\n",
      "\t\tvar comment_parent = 0;\r\n",
      "\t\tvar is_user_logged_in = $(\"#is_user_logged_in\").val();\r\n",
      "\t\tvar comment_post_ID =  401;\r\n",
      "\t\tvar _wp_unfiltered_html_comment = $(\"#_wp_unfiltered_html_comment\").val();\r\n",
      "\t\tvar comment = noteContent;\r\n",
      "\t\tvar author = $(\"#author\").val();\r\n",
      "\t\tvar url = $(\"#url\").val();\r\n",
      "\t\tvar email = $(\"#email\").val();\r\n",
      "\t\tif(isBlank(author) && is_user_logged_in==0) {\r\n",
      "\t\t\tstatusdiv.html('<p  class=\"ajax-error\">请输入昵称！</p>').show();\r\n",
      "\t\t} else if(isBlank(email)  && is_user_logged_in==0) {\r\n",
      "\t\t\tstatusdiv.html('<p  class=\"ajax-error\">请输入邮箱！</p>').show();\r\n",
      "\t\t} else {\r\n",
      "\t\t\t// var formdata=commentform.serialize() + \"&comment=\" + noteContent ;\r\n",
      "\t\t\t// 添加状态信息\r\n",
      "\t\t\tstatusdiv.html('<p>Processing...</p>').show();\r\n",
      "\t\t\t// 获取表单提交地址\r\n",
      "\t\t\tvar formurl=commentform.attr('action');\r\n",
      "\t\t\t\r\n",
      "\t\t\t// 异步提交\r\n",
      "\t\t\t$.ajax({\r\n",
      "\t\t\t\t\ttype: 'post',\r\n",
      "\t\t\t\t\turl: formurl,\r\n",
      "\t\t\t\t\tdataType:'json',\r\n",
      "\t\t\t\t\tdata: {\"comment_parent\":comment_parent,\"comment_post_ID\":comment_post_ID, \"_wp_unfiltered_html_comment\":_wp_unfiltered_html_comment,\"comment\":comment,\"url\":url, \"email\":email,\"author\":author},\r\n",
      "\t\t\t\t\terror: function(XMLHttpRequest, textStatus, errorThrown){\r\n",
      "\t\t\t\t\tstatusdiv.html('<p class=\"ajax-error\" >数据不完整或表单提交太快了！</p>').show();\r\n",
      "\t\t\t\t},\r\n",
      "\t\t\t\tsuccess: function(data, textStatus){\r\n",
      "\t\t\t\t\tif(data.errorno==\"0\") {\r\n",
      "\t\t\t\t\t\t$(\"#submit\").prop('disabled', true);\r\n",
      "\t\t\t\t\t\tstatusdiv.html('<p class=\"ajax-success\" >笔记已提交审核，感谢分享笔记！</p>').show();\r\n",
      "\t\t\t\t\t\talert('笔记已提交审核，感谢分享笔记！');\r\n",
      "\t\t\t\t\t}else{\r\n",
      "\t\t\t\t\t\tstatusdiv.html('<p class=\"ajax-error\" >'+data.msg+'</p>').show();\r\n",
      "\t\t\t\t\t}\r\n",
      "\t\t\t\t\tcommentform.find('textarea[name=comment]').val('');\r\n",
      "\t\t\t\t}\r\n",
      "\t\t\t});\r\n",
      "\t\t\tsetTimeout(function(){\r\n",
      "\t\t        $(\"#submit\").prop('disabled', false);\r\n",
      "\t\t    }, 10*1000);\r\n",
      "\t\t}\r\n",
      "\t\treturn false;\r\n",
      "\r\n",
      "\t});\r\n",
      "\t$(\".comt-author\").click(function() {\r\n",
      "\t\thref = $(this).children(\"a\").attr(\"href\");\r\n",
      "\t\tif(href.indexOf(\"/note/\")!=-1) {\r\n",
      "\t\t\tvar win = window.open(href, '_blank');\r\n",
      "  \t\t\twin.focus();\r\n",
      "\t\t}\r\n",
      "\t});\r\n",
      "\t$(\".comt-author\").hover(function(){\r\n",
      "\t\t$(this).children(\".tooltip\").css({ \"opacity\": 1, \"pointer-events\": \"auto\"});\r\n",
      "\t},function(){\r\n",
      "\t\t$(this).children(\".tooltip\").css({ \"opacity\": 0, \"pointer-events\": \"auto\"});\r\n",
      "\t});\r\n",
      "\t$(\".wrapper i\").hover(function(){\r\n",
      "\t\t$(this).siblings(\".tooltip\").css({ \"opacity\": 1, \"pointer-events\": \"auto\"});\r\n",
      "\t},function(){\r\n",
      "\t\t$(this).siblings(\".tooltip\").css({ \"opacity\": 0, \"pointer-events\": \"auto\"});\r\n",
      "\t});\r\n",
      "\t//Upvote.create('runoobvote-id', {callback: vote_callback});\r\n",
      "\tvar ajaxurl = 'https://www.runoob.com/wp-admin/admin-ajax.php';\r\n",
      "\tvar callback = function(data) {\r\n",
      "\t\t//console.log($('#runoobvote-id').upvote('upvoted'));\r\n",
      "\t\t//console.log($('#runoobvote-id').upvote('downvoted'));\r\n",
      "\t\t//console.log(data);\r\n",
      "\t\t_vote_action = data.action;\r\n",
      "\t\tconsole.log(_vote_action);\r\n",
      "\t\tid_arr = data.id.split('-');\r\n",
      "\t\tum_id= id_arr[2];\r\n",
      "\t\t//console.log(um_id);\r\n",
      "\t\t\r\n",
      "\t\tvar re = /^[1-9]+/;\r\n",
      "\t\tif (re.test(um_id)) { \r\n",
      "\t\t\tvar ajax_data = {\r\n",
      "\t\t\t\t_vote_action: _vote_action,\r\n",
      "\t\t\t\taction: \"pinglun_zan\",\r\n",
      "\t\t\t\tum_id: um_id,\r\n",
      "\t\t\t\tum_action: \"ding\"\r\n",
      "\t\t\t};\r\n",
      "\t\t\t//console.log(ajax_data);\r\n",
      "\t\t\t$.post(ajaxurl,ajax_data,function(status){\r\n",
      "\t\t\t\t//console.log(\"Data: \" + data + \"nStatus: \" + status);\r\n",
      "\t\t\t});\r\n",
      "\t\t}\r\n",
      "\t};\r\n",
      "\tif($('#comments').length){\r\n",
      "\t\t$('.upvotejs').upvote({id: 401, callback: callback});\r\n",
      "\t\t\r\n",
      "\t\t$.post(ajaxurl,{\"action\":\"pinglun_zan\",\"postid\":401},function(data){  \r\n",
      "\t\t\t$(data).each(function(key,value) {\r\n",
      "\t\t\t\t$(\"#runoobvote-id-\" + value.commid + \" .upvote\").addClass(value.upvotejs_class);\r\n",
      "\t\t\t\t$(\"#runoobvote-id-\" + value.commid + \" .downvote\").addClass(value.downvote_class);\r\n",
      "\t\t\t\t$(\"#runoobvote-id-\" + value.commid + \" .count\").addClass(value.upvote_count)\r\n",
      "\t\t\t})\r\n",
      "\t\t},'json');\r\n",
      "\t}\r\n",
      "\t\r\n",
      "\t\r\n",
      "});\r\n",
      "function isBlank(str) {\r\n",
      "    return (!str || /^\\s*$/.test(str));\r\n",
      "}\n",
      "      </script>\n",
      "      <link href=\"https://static.runoob.com/assets/upvotejs/dist/upvotejs/upvotejs.css\" rel=\"stylesheet\"/>\n",
      "      <script src=\"https://static.runoob.com/assets/upvotejs/dist/upvotejs/upvotejs.vanilla.js\">\n",
      "      </script>\n",
      "      <script src=\"https://static.runoob.com/assets/upvotejs/dist/upvotejs/upvotejs.jquery.js\">\n",
      "      </script>\n",
      "      <link href=\"/wp-content/themes/runoob/assets/css/qa.css?1.43\" rel=\"stylesheet\"/>\n",
      "      <link href=\"https://static.runoob.com/assets/simditor/2.3.6/styles/simditor.css\" rel=\"stylesheet\" type=\"text/css\"/>\n",
      "      <script src=\"https://static.runoob.com/assets/simditor/2.3.6/scripts/module.js\" type=\"text/javascript\">\n",
      "      </script>\n",
      "      <script src=\"//static.runoob.com/assets/simditor/2.3.6/scripts/hotkeys.js\" type=\"text/javascript\">\n",
      "      </script>\n",
      "      <script src=\"//static.runoob.com/assets/simditor/2.3.6/scripts/uploader.js\" type=\"text/javascript\">\n",
      "      </script>\n",
      "      <script src=\"https://static.runoob.com/assets/simditor/2.3.6/scripts/simditor.min.js\" type=\"text/javascript\">\n",
      "      </script>\n",
      "      <script src=\"https://static.runoob.com/assets/simditor/2.3.6/scripts/simditor-autosave.js\" type=\"text/javascript\">\n",
      "      </script>\n",
      "      <div class=\"sidebar-box\">\n",
      "       <div id=\"ad-336280\">\n",
      "        <style>\n",
      "         .responsive_ad1 { display:none; }\n",
      "@media(min-width: 800px) { .responsive_ad1 {  display:block;margin:0 auto;} }\n",
      "        </style>\n",
      "        <script async=\"\" src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\">\n",
      "        </script>\n",
      "        <!-- 移动版 自动调整 -->\n",
      "        <ins class=\"adsbygoogle responsive_ad1\" data-ad-client=\"ca-pub-5751451760833794\" data-ad-slot=\"1691338467\" data-full-width-responsive=\"true\" style=\"min-width:400px;max-width:728px;width:100%;height:90px;\">\n",
      "        </ins>\n",
      "        <script>\n",
      "         (adsbygoogle = window.adsbygoogle || []).push({});\n",
      "        </script>\n",
      "       </div>\n",
      "      </div>\n",
      "     </div>\n",
      "    </div>\n",
      "    <!-- 右边栏 -->\n",
      "    <div class=\"fivecol last right-column\">\n",
      "     <!--\r\n",
      "\t<div class=\"tab tab-light-blue\" style=\"text-align: center;\">关注微信</div>\r\n",
      "\t<div class=\"sidebar-box\">\r\n",
      "\t\t<a href=\"http://m.runoob.com/\" target=\"_blank\"> <img src=\"http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg\" alt=\"移动版\"> </a>\r\n",
      "\t\t<div class=\"qqinfo\">\r\n",
      "\t\t <a target=\"_blank\" href=\"http://jq.qq.com/?_wv=1027&k=dOwwKN\" id=\"qqhref\">\r\n",
      "\t\t<img border=\"0\" src=\"http://pub.idqqimg.com/wpa/images/group.png\" alt=\"菜鸟家族\" title=\"菜鸟家族\"></a>\r\n",
      "\t\t<span>(群号：<span id=\"qqid\">365967760</span>)</span>\r\n",
      "\t\t</div>\r\n",
      "\t\t\r\n",
      "\t</div>\r\n",
      "\t-->\n",
      "     <style>\n",
      "      .sidebar-tree .double-li {\r\n",
      "\twidth:300px;\r\n",
      "}\r\n",
      ".sidebar-tree .double-li li {\r\n",
      "    width: 44%;\r\n",
      "    line-height: 1.5em;\r\n",
      "    border-bottom: 1px solid #ccc;\r\n",
      "    float: left;\r\n",
      "    display: inline;\r\n",
      "}\n",
      "     </style>\n",
      "     <div class=\"sidebar-box re-box re-box-large\">\n",
      "      <div class=\"sidebar-box recommend-here\" style=\"margin: 0 auto;\">\n",
      "       <a href=\"javascript:void(0);\" style=\"font-size: 16px; color:#64854c;font-weight:bold;\">\n",
      "        <i aria-hidden=\"true\" class=\"fa fa-list\">\n",
      "        </i>\n",
      "        分类导航\n",
      "       </a>\n",
      "      </div>\n",
      "      <div class=\"sidebar-box sidebar-cate\">\n",
      "       <div class=\"sidebar-tree\">\n",
      "        <ul>\n",
      "         <li style=\"margin: 0;\">\n",
      "          <a class=\"tit\" href=\"javascript:void(0);\">\n",
      "           HTML / CSS\n",
      "          </a>\n",
      "          <ul class=\"double-li\">\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/html/html-tutorial.html\" title=\"HTML 教程\">\n",
      "             HTML 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/html/html5-intro.html\" title=\"HTML5 教程\">\n",
      "             HTML5 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/css/css-tutorial.html\" title=\"CSS 教程\">\n",
      "             CSS 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/css3/css3-tutorial.html\" title=\"CSS3 教程\">\n",
      "             CSS3 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/bootstrap/bootstrap-tutorial.html\" title=\"Bootstrap3 教程\">\n",
      "             Bootstrap3 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/bootstrap4/bootstrap4-tutorial.html\" title=\"Bootstrap4 教程\">\n",
      "             Bootstrap4 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/font-awesome/fontawesome-tutorial.html\" title=\"Font Awesome 教程\">\n",
      "             Font Awesome 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/foundation/foundation-tutorial.html\" title=\"Foundation 教程\">\n",
      "             Foundation 教程\n",
      "            </a>\n",
      "           </li>\n",
      "          </ul>\n",
      "         </li>\n",
      "         <li style=\"margin: 0;\">\n",
      "          <a class=\"tit\" href=\"javascript:void(0);\">\n",
      "           JavaScript\n",
      "          </a>\n",
      "          <ul class=\"double-li\">\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/js/js-tutorial.html\" title=\"JavaScript 教程\">\n",
      "             JavaScript 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/htmldom/htmldom-tutorial.html\" title=\"HTML DOM 教程\">\n",
      "             HTML DOM 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/jquery/jquery-tutorial.html\" title=\"jQuery 教程\">\n",
      "             jQuery 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/angularjs/angularjs-tutorial.html\" title=\"AngularJS 教程\">\n",
      "             AngularJS 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/angularjs2/angularjs2-tutorial.html\" title=\"AngularJS2 教程\">\n",
      "             AngularJS2 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/vue2/vue-tutorial.html\" title=\"Vue.js 教程\">\n",
      "             Vue.js 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/react/react-tutorial.html\" title=\"React 教程\">\n",
      "             React 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/typescript/ts-tutorial.html\" title=\"TypeScript 教程\">\n",
      "             TypeScript 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/jqueryui/jqueryui-tutorial.html\" title=\"jQuery UI 教程\">\n",
      "             jQuery UI 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/jeasyui/jqueryeasyui-tutorial.html\" title=\"jQuery EasyUI 教程\">\n",
      "             jQuery EasyUI 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/nodejs/nodejs-tutorial.html\" title=\"Node.js 教程\">\n",
      "             Node.js 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/ajax/ajax-tutorial.html\" title=\"AJAX 教程\">\n",
      "             AJAX 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/json/json-tutorial.html\" title=\"JSON 教程\">\n",
      "             JSON 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/echarts/echarts-tutorial.html\" title=\"Echarts 教程\">\n",
      "             Echarts 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/highcharts/highcharts-tutorial.html\" title=\"Highcharts 教程\">\n",
      "             Highcharts 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/googleapi/google-maps-basic.html\" title=\"Google 地图 教程\">\n",
      "             Google 地图 教程\n",
      "            </a>\n",
      "           </li>\n",
      "          </ul>\n",
      "         </li>\n",
      "         <li style=\"margin: 0;\">\n",
      "          <a class=\"tit\" href=\"javascript:void(0);\">\n",
      "           服务端\n",
      "          </a>\n",
      "          <ul class=\"double-li\">\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/python3/python3-tutorial.html\" title=\"Python 教程\">\n",
      "             Python 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/python/python-tutorial.html\" title=\"Python2.x 教程\">\n",
      "             Python2.x 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/linux/linux-tutorial.html\" title=\"Linux 教程\">\n",
      "             Linux 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/docker/docker-tutorial.html\" title=\"Docker 教程\">\n",
      "             Docker 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/ruby/ruby-tutorial.html\" title=\"Ruby 教程\">\n",
      "             Ruby 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/java/java-tutorial.html\" title=\"Java 教程\">\n",
      "             Java 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/c/c-tutorial.html\" title=\"C 教程\">\n",
      "             C 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/cplusplus/cpp-tutorial.html\" title=\"C++ 教程\">\n",
      "             C++ 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/perl/perl-tutorial.html\" title=\"Perl 教程\">\n",
      "             Perl 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/servlet/servlet-tutorial.html\" title=\"Servlet 教程\">\n",
      "             Servlet 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/jsp/jsp-tutorial.html\" title=\"JSP 教程\">\n",
      "             JSP 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/lua/lua-tutorial.html\" title=\"Lua 教程\">\n",
      "             Lua 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/rust/rust-tutorial.html\" title=\"Rust 教程\">\n",
      "             Rust 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/scala/scala-tutorial.html\" title=\"Scala 教程\">\n",
      "             Scala 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/go/go-tutorial.html\" title=\"Go 教程\">\n",
      "             Go 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/php/php-tutorial.html\" title=\"PHP 教程\">\n",
      "             PHP 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/django/django-tutorial.html\" title=\"Django 教程\">\n",
      "             Django 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/design-pattern/design-pattern-tutorial.html\" title=\"设计模式\">\n",
      "             设计模式\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/regexp/regexp-tutorial.html\" title=\"正则表达式\">\n",
      "             正则表达式\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/maven/maven-tutorial.html\" title=\"Maven 教程\">\n",
      "             Maven 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/numpy/numpy-tutorial.html\" title=\"NumPy 教程\">\n",
      "             NumPy 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/asp/asp-tutorial.html\" title=\"ASP 教程\">\n",
      "             ASP 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/appml/appml-tutorial.html\" title=\"AppML 教程\">\n",
      "             AppML 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/vbscript/vbscript-tutorial.html\" title=\"VBScript 教程\">\n",
      "             VBScript 教程\n",
      "            </a>\n",
      "           </li>\n",
      "          </ul>\n",
      "         </li>\n",
      "         <li style=\"margin: 0;\">\n",
      "          <a class=\"tit\" href=\"javascript:void(0);\">\n",
      "           数据库\n",
      "          </a>\n",
      "          <ul class=\"double-li\">\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/sql/sql-tutorial.html\" title=\"SQL 教程\">\n",
      "             SQL 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/mysql/mysql-tutorial.html\" title=\"Mysql 教程\">\n",
      "             Mysql 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/postgresql/postgresql-tutorial.html\" title=\"PostgreSQL 教程\">\n",
      "             PostgreSQL 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/sqlite/sqlite-tutorial.html\" title=\"SQLite 教程\">\n",
      "             SQLite 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/mongodb/mongodb-tutorial.html\" title=\"MongoDB 教程\">\n",
      "             MongoDB 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/redis/redis-tutorial.html\" title=\"Redis 教程\">\n",
      "             Redis 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/Memcached/Memcached-tutorial.html\" title=\"Memcached 教程\">\n",
      "             Memcached 教程\n",
      "            </a>\n",
      "           </li>\n",
      "          </ul>\n",
      "         </li>\n",
      "         <li style=\"margin: 0;\">\n",
      "          <a class=\"tit\" href=\"javascript:void(0);\">\n",
      "           移动端\n",
      "          </a>\n",
      "          <ul class=\"double-li\">\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/w3cnote/android-tutorial-intro.html\" title=\"Android 教程\">\n",
      "             Android 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/swift/swift-tutorial.html\" title=\"Swift 教程\">\n",
      "             Swift 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/jquerymobile/jquerymobile-tutorial.html\" title=\"jQuery Mobile 教程\">\n",
      "             jQuery Mobile 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/ionic/ionic-tutorial.html\" title=\"ionic 教程\">\n",
      "             ionic 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/kotlin/kotlin-tutorial.html\" title=\"Kotlin 教程\">\n",
      "             Kotlin 教程\n",
      "            </a>\n",
      "           </li>\n",
      "          </ul>\n",
      "         </li>\n",
      "         <li style=\"margin: 0;\">\n",
      "          <a class=\"tit\" href=\"javascript:void(0);\">\n",
      "           XML 教程\n",
      "          </a>\n",
      "          <ul class=\"double-li\">\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/xml/xml-tutorial.html\" title=\"XML 教程\">\n",
      "             XML 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/dtd/dtd-tutorial.html\" title=\"DTD 教程\">\n",
      "             DTD 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/dom/dom-tutorial.html\" title=\"XML DOM 教程\">\n",
      "             XML DOM 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/xsl/xsl-tutorial.html\" title=\"XSLT 教程\">\n",
      "             XSLT 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/xpath/xpath-tutorial.html\" title=\"XPath 教程\">\n",
      "             XPath 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/xquery/xquery-tutorial.html\" title=\"XQuery 教程\">\n",
      "             XQuery 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/xlink/xlink-tutorial.html\" title=\"XLink 教程\">\n",
      "             XLink 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/xlink/xlink-tutorial.html\" title=\"XPointer 教程\">\n",
      "             XPointer 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/schema/schema-tutorial.html\" title=\"XML Schema 教程\">\n",
      "             XML Schema 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/xslfo/xslfo-tutorial.html\" title=\"XSL-FO 教程\">\n",
      "             XSL-FO 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/svg/svg-tutorial.html\" title=\"SVG 教程\">\n",
      "             SVG 教程\n",
      "            </a>\n",
      "           </li>\n",
      "          </ul>\n",
      "         </li>\n",
      "         <li style=\"margin: 0;\">\n",
      "          <a class=\"tit\" href=\"javascript:void(0);\">\n",
      "           ASP.NET\n",
      "          </a>\n",
      "          <ul class=\"double-li\">\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/aspnet/aspnet-tutorial.html\" title=\"ASP.NET 教程\">\n",
      "             ASP.NET 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/csharp/csharp-tutorial.html\" title=\"C# 教程\">\n",
      "             C# 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/aspnet/webpages-intro.html\" title=\"Web Pages 教程\">\n",
      "             Web Pages 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/aspnet/razor-intro.html\" title=\"Razor 教程\">\n",
      "             Razor 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/aspnet/mvc-intro.html\" title=\"MVC 教程\">\n",
      "             MVC 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/aspnet/aspnet-intro.html\" title=\"Web Forms 教程\">\n",
      "             Web Forms 教程\n",
      "            </a>\n",
      "           </li>\n",
      "          </ul>\n",
      "         </li>\n",
      "         <li style=\"margin: 0;\">\n",
      "          <a class=\"tit\" href=\"javascript:void(0);\">\n",
      "           Web Service\n",
      "          </a>\n",
      "          <ul class=\"double-li\">\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/webservices/webservices-tutorial.html\" title=\"Web Service 教程\">\n",
      "             Web Service 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/wsdl/wsdl-tutorial.html\" title=\"WSDL 教程\">\n",
      "             WSDL 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/soap/soap-tutorial.html\" title=\"SOAP 教程\">\n",
      "             SOAP 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/rss/rss-tutorial.html\" title=\"RSS 教程\">\n",
      "             RSS 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/rdf/rdf-tutorial.html\" title=\"RDF 教程\">\n",
      "             RDF 教程\n",
      "            </a>\n",
      "           </li>\n",
      "          </ul>\n",
      "         </li>\n",
      "         <li style=\"margin: 0;\">\n",
      "          <a class=\"tit\" href=\"javascript:void(0);\">\n",
      "           开发工具\n",
      "          </a>\n",
      "          <ul class=\"double-li\">\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/eclipse/eclipse-tutorial.html\" title=\"Eclipse 教程\">\n",
      "             Eclipse 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/git/git-tutorial.html\" title=\"Git 教程\">\n",
      "             Git 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/svn/svn-tutorial.html\" title=\"Svn 教程\">\n",
      "             Svn 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/markdown/md-tutorial.html\" title=\"Markdown 教程\">\n",
      "             Markdown 教程\n",
      "            </a>\n",
      "           </li>\n",
      "          </ul>\n",
      "         </li>\n",
      "         <li style=\"margin: 0;\">\n",
      "          <a class=\"tit\" href=\"javascript:void(0);\">\n",
      "           网站建设\n",
      "          </a>\n",
      "          <ul class=\"double-li\">\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/http/http-tutorial.html\" title=\"HTTP 教程\">\n",
      "             HTTP 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/web/web-buildingprimer.html\" title=\"网站建设指南\">\n",
      "             网站建设指南\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/browsers/browser-information.html\" title=\"浏览器信息\">\n",
      "             浏览器信息\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/hosting/hosting-tutorial.html\" title=\"网站主机教程\">\n",
      "             网站主机教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/tcpip/tcpip-tutorial.html\" title=\"TCP/IP 教程\">\n",
      "             TCP/IP 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/w3c/w3c-tutorial.html\" title=\"W3C 教程\">\n",
      "             W3C 教程\n",
      "            </a>\n",
      "           </li>\n",
      "           <li>\n",
      "            <a href=\"//www.runoob.com/quality/quality-tutorial.html\" title=\"网站品质\">\n",
      "             网站品质\n",
      "            </a>\n",
      "           </li>\n",
      "          </ul>\n",
      "         </li>\n",
      "        </ul>\n",
      "       </div>\n",
      "      </div>\n",
      "     </div>\n",
      "     <br/>\n",
      "     <div class=\"sidebar-box re-box re-box-large\">\n",
      "      <div class=\"sidebar-box recommend-here\">\n",
      "       <a href=\"javascript:void(0);\">\n",
      "        Advertisement\n",
      "       </a>\n",
      "      </div>\n",
      "      <div class=\"re-600160\" id=\"sidebar-right-re\">\n",
      "       <script async=\"\" src=\"//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\">\n",
      "       </script>\n",
      "       <!-- 侧栏1 -->\n",
      "       <ins class=\"adsbygoogle\" data-ad-client=\"ca-pub-5751451760833794\" data-ad-slot=\"4106274865\" style=\"display:inline-block;width:160px;height:600px\">\n",
      "       </ins>\n",
      "       <script>\n",
      "        (adsbygoogle = window.adsbygoogle || []).push({});\n",
      "       </script>\n",
      "      </div>\n",
      "     </div>\n",
      "    </div>\n",
      "   </div>\n",
      "  </div>\n",
      "  <script>\n",
      "   var aid = 401;\n",
      "function coll() {\n",
      "\t$.post( '/wp-content/themes/runoob/option/user/userinfo.php', {aid:aid, action:\"collarticle\", opt:'add'},function( data ) {\n",
      "\t\tif(data.error==0) {\n",
      "\t\t\t$(\"#content\").find(\"h1:first\").find(\"a\").attr(\"href\",\"javascript:void(0);\");\n",
      "\t\t\t$(\"#content\").find(\"h1:first\").find(\"img\").attr(\"src\",\"http://www.runoob.com/wp-content/themes/runoob/assets/img/coll2.png\").css({width:32+\"px\",height:32+\"px\"});\n",
      "\t\t}\n",
      "\t\talert(data.msg);\n",
      "\t},'json');\n",
      "}\n",
      "  </script>\n",
      "  <!-- 反馈对话框开始 -->\n",
      "  <script src=\"/wp-content/themes/runoob/assets/feedback/stable/2.0/feedback.js?1.0\">\n",
      "  </script>\n",
      "  <link href=\"/wp-content/themes/runoob/assets/feedback/stable/2.0/feedback.css?1.0\" rel=\"stylesheet\"/>\n",
      "  <script type=\"text/javascript\">\n",
      "   $.feedback({\n",
      "    ajaxURL: '/feedback/runoob_feedback.php',\n",
      "\thtml2canvasURL: '/wp-content/themes/runoob/assets/feedback/stable/2.0/html2canvas.js',\n",
      "\tonClose: function () {\n",
      "         window.location.reload();\n",
      "    }\n",
      "});\n",
      "  </script>\n",
      "  <!-- 反馈对话框结束 -->\n",
      "  <button class=\"feedback-btn feedback-btn-gray\">\n",
      "   反馈/建议\n",
      "  </button>\n",
      "  <!-- 底部 -->\n",
      "  <div class=\"mar-t50\" id=\"footer\">\n",
      "   <div class=\"runoob-block\">\n",
      "    <div class=\"runoob cf\">\n",
      "     <dl>\n",
      "      <dt>\n",
      "       在线实例\n",
      "      </dt>\n",
      "      <dd>\n",
      "       ·\n",
      "       <a href=\"/html/html-examples.html\" target=\"_blank\">\n",
      "        HTML 实例\n",
      "       </a>\n",
      "      </dd>\n",
      "      <dd>\n",
      "       ·\n",
      "       <a href=\"/css/css-examples.html\" target=\"_blank\">\n",
      "        CSS 实例\n",
      "       </a>\n",
      "      </dd>\n",
      "      <dd>\n",
      "       ·\n",
      "       <a href=\"/js/js-examples.html\" target=\"_blank\">\n",
      "        JavaScript 实例\n",
      "       </a>\n",
      "      </dd>\n",
      "      <dd>\n",
      "       ·\n",
      "       <a href=\"/ajx/ajax-examples.html\" target=\"_blank\">\n",
      "        Ajax 实例\n",
      "       </a>\n",
      "      </dd>\n",
      "      <dd>\n",
      "       ·\n",
      "       <a href=\"/jquery/jquery-examples.html\" target=\"_blank\">\n",
      "        jQuery 实例\n",
      "       </a>\n",
      "      </dd>\n",
      "      <dd>\n",
      "       ·\n",
      "       <a href=\"/xml/xml-examples.html\" target=\"_blank\">\n",
      "        XML 实例\n",
      "       </a>\n",
      "      </dd>\n",
      "      <dd>\n",
      "       ·\n",
      "       <a href=\"/java/java-examples.html\" target=\"_blank\">\n",
      "        Java 实例\n",
      "       </a>\n",
      "      </dd>\n",
      "     </dl>\n",
      "     <dl>\n",
      "      <dt>\n",
      "       字符集&amp;工具\n",
      "      </dt>\n",
      "      <dd>\n",
      "       ·\n",
      "       <a href=\"/charsets/html-charsets.html\" target=\"_blank\">\n",
      "        HTML 字符集设置\n",
      "       </a>\n",
      "      </dd>\n",
      "      <dd>\n",
      "       ·\n",
      "       <a href=\"/tags/html-ascii.html\" target=\"_blank\">\n",
      "        HTML ASCII 字符集\n",
      "       </a>\n",
      "      </dd>\n",
      "      <dd>\n",
      "       ·\n",
      "       <a href=\"/tags/ref-entities.html\" target=\"_blank\">\n",
      "        HTML ISO-8859-1\n",
      "       </a>\n",
      "      </dd>\n",
      "      <dd>\n",
      "       ·\n",
      "       <a href=\"/tags/html-symbols.html\" target=\"_blank\">\n",
      "        HTML 实体符号\n",
      "       </a>\n",
      "      </dd>\n",
      "      <dd>\n",
      "       ·\n",
      "       <a href=\"/tags/html-colorpicker.html\" target=\"_blank\">\n",
      "        HTML 拾色器\n",
      "       </a>\n",
      "      </dd>\n",
      "      <dd>\n",
      "       ·\n",
      "       <a href=\"//c.runoob.com/front-end/53\" target=\"_blank\">\n",
      "        JSON 格式化工具\n",
      "       </a>\n",
      "      </dd>\n",
      "     </dl>\n",
      "     <dl>\n",
      "      <dt>\n",
      "       最新更新\n",
      "      </dt>\n",
      "      <dd>\n",
      "       ·\n",
      "       <a href=\"http://www.runoob.com/js/js-promise.html\" title=\"JavaScript Promise\">\n",
      "        JavaScript Promise\n",
      "       </a>\n",
      "      </dd>\n",
      "      <dd>\n",
      "       ·\n",
      "       <a href=\"http://www.runoob.com/js/js-async.html\" title=\"JavaScript 异步编程\">\n",
      "        JavaScript 异步...\n",
      "       </a>\n",
      "      </dd>\n",
      "      <dd>\n",
      "       ·\n",
      "       <a href=\"http://www.runoob.com/python3/python3-func-oct.html\" title=\"Python3 oct() 函数\">\n",
      "        Python3 oct() 函数\n",
      "       </a>\n",
      "      </dd>\n",
      "      <dd>\n",
      "       ·\n",
      "       <a href=\"http://www.runoob.com/linux/linux-comm-nohup.html\" title=\"Linux nohup 命令\">\n",
      "        Linux nohup 命令\n",
      "       </a>\n",
      "      </dd>\n",
      "      <dd>\n",
      "       ·\n",
      "       <a href=\"http://www.runoob.com/java/java-iterator.html\" title=\"Java Iterator（迭代器）\">\n",
      "        Java Iterator（...\n",
      "       </a>\n",
      "      </dd>\n",
      "      <dd>\n",
      "       ·\n",
      "       <a href=\"http://www.runoob.com/java/java-hashset.html\" title=\"Java HashSet\">\n",
      "        Java HashSet\n",
      "       </a>\n",
      "      </dd>\n",
      "      <dd>\n",
      "       ·\n",
      "       <a href=\"http://www.runoob.com/java/java-hashmap.html\" title=\"Java HashMap\">\n",
      "        Java HashMap\n",
      "       </a>\n",
      "      </dd>\n",
      "     </dl>\n",
      "     <dl>\n",
      "      <dt>\n",
      "       站点信息\n",
      "      </dt>\n",
      "      <dd>\n",
      "       ·\n",
      "       <a href=\"//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w\" rel=\"external nofollow\" target=\"_blank\">\n",
      "        意见反馈\n",
      "       </a>\n",
      "      </dd>\n",
      "      <!--\n",
      "      <dd>\n",
      "       &middot;\n",
      "      <a class=\"wxpopup\" onclick=\"popFunction()\">加入我们\n",
      "       <span class=\"popuptext\" id=\"myPopup\">\n",
      "       岗位：技术类型自媒体<br>\n",
      "工作地点：厦门<br>\n",
      "\n",
      "具体联系邮箱：<strong>429240967@qq.com</strong></span>\n",
      "      </a>\n",
      "      </dd> \n",
      "      -->\n",
      "      <dd>\n",
      "       ·\n",
      "       <a href=\"/disclaimer\" target=\"_blank\">\n",
      "        免责声明\n",
      "       </a>\n",
      "      </dd>\n",
      "      <!--\n",
      "       <dd style=\"display: block;\">\n",
      "       &middot;\n",
      "      <a href=\"javascript:void(0)\" onclick=\"dashangToggle()\" style=\"font-weight:bold;color:#f00;\" title=\"打赏，支持一下\">打赏一下</a>\n",
      "       </dd>\n",
      "     -->\n",
      "      <dd>\n",
      "       ·\n",
      "       <a href=\"/aboutus\" target=\"_blank\">\n",
      "        关于我们\n",
      "       </a>\n",
      "      </dd>\n",
      "      <dd>\n",
      "       ·\n",
      "       <a href=\"/archives\" target=\"_blank\">\n",
      "        文章归档\n",
      "       </a>\n",
      "      </dd>\n",
      "     </dl>\n",
      "     <div class=\"search-share\">\n",
      "      <div class=\"app-download\">\n",
      "       <div>\n",
      "        <strong>\n",
      "         关注微信\n",
      "        </strong>\n",
      "       </div>\n",
      "      </div>\n",
      "      <div class=\"share\">\n",
      "       <img height=\"128\" src=\"/wp-content/themes/runoob/assets/images/qrcode.png\" width=\"128\"/>\n",
      "      </div>\n",
      "     </div>\n",
      "    </div>\n",
      "   </div>\n",
      "   <div class=\"w-1000 copyright\">\n",
      "    Copyright © 2013-2020\n",
      "    <strong>\n",
      "     <a href=\"//www.runoob.com/\" target=\"_blank\">\n",
      "      菜鸟教程\n",
      "     </a>\n",
      "    </strong>\n",
      "    <strong>\n",
      "     <a href=\"//www.runoob.com/\" target=\"_blank\">\n",
      "      runoob.com\n",
      "     </a>\n",
      "    </strong>\n",
      "    All Rights Reserved. 备案号：\n",
      "    <a href=\"http://www.beian.miit.gov.cn\" rel=\"nofollow\" target=\"_blank\">\n",
      "     闽ICP备15012807号-1\n",
      "    </a>\n",
      "   </div>\n",
      "  </div>\n",
      "  <div class=\"fixed-btn\">\n",
      "   <a class=\"go-top\" href=\"javascript:void(0)\" title=\"返回顶部\">\n",
      "    <i class=\"fa fa-angle-up\">\n",
      "    </i>\n",
      "   </a>\n",
      "   <a class=\"qrcode\" href=\"javascript:void(0)\" title=\"关注我们\">\n",
      "    <i class=\"fa fa-qrcode\">\n",
      "    </i>\n",
      "   </a>\n",
      "   <a class=\"writer\" href=\"javascript:void(0)\" style=\"display:none\" title=\"标记/收藏\">\n",
      "    <i aria-hidden=\"true\" class=\"fa fa-star\">\n",
      "    </i>\n",
      "   </a>\n",
      "   <!-- qrcode modal -->\n",
      "   <div class=\"modal panel-modal hide fade in\" id=\"bottom-qrcode\">\n",
      "    <h4>\n",
      "     微信关注\n",
      "    </h4>\n",
      "    <div class=\"panel-body\">\n",
      "     <img alt=\"微信关注\" height=\"128\" src=\"/wp-content/themes/runoob/assets/images/qrcode.png\" width=\"128\"/>\n",
      "    </div>\n",
      "   </div>\n",
      "  </div>\n",
      "  <div class=\"hide_box\">\n",
      "  </div>\n",
      "  <div class=\"shang_box\">\n",
      "   <a class=\"shang_close\" href=\"javascript:void(0)\" onclick=\"dashangToggle()\" title=\"关闭\">\n",
      "    <img alt=\"取消\" src=\"//static.runoob.com/images/dashang/close.jpg\"/>\n",
      "   </a>\n",
      "   <div class=\"shang_tit\">\n",
      "    <p>\n",
      "     感谢您的支持，我会继续努力的!\n",
      "    </p>\n",
      "   </div>\n",
      "   <div class=\"shang_payimg\">\n",
      "    <img alt=\"扫码支持\" src=\"//static.runoob.com/images/dashang/weipayimg.png\" title=\"扫一扫\"/>\n",
      "   </div>\n",
      "   <div class=\"pay_explain\">\n",
      "    扫码打赏，你说多少就多少\n",
      "   </div>\n",
      "   <div class=\"shang_payselect\">\n",
      "    <div class=\"pay_item checked\" data-id=\"weipay\">\n",
      "     <span class=\"radiobox\">\n",
      "     </span>\n",
      "     <span class=\"pay_logo\">\n",
      "      <img alt=\"微信\" src=\"//static.runoob.com/images/dashang/wechat.jpg\"/>\n",
      "     </span>\n",
      "    </div>\n",
      "    <div class=\"pay_item\" data-id=\"alipay\">\n",
      "     <span class=\"radiobox\">\n",
      "     </span>\n",
      "     <span class=\"pay_logo\">\n",
      "      <img alt=\"支付宝\" src=\"//static.runoob.com/images/dashang/alipay.jpg\"/>\n",
      "     </span>\n",
      "    </div>\n",
      "   </div>\n",
      "   <div class=\"shang_info\">\n",
      "    <p>\n",
      "     打开\n",
      "     <span id=\"shang_pay_txt\">\n",
      "      支付宝\n",
      "     </span>\n",
      "     扫一扫，即可进行扫码打赏哦\n",
      "    </p>\n",
      "    <p>\n",
      "     <a href=\"//c.runoob.com/codedemo/5348\" target=\"_blank\">\n",
      "      <span style=\" font-size: 14px;color: #000;font-weight: bold;\">\n",
      "       点我查看本站打赏源码！\n",
      "      </span>\n",
      "     </a>\n",
      "    </p>\n",
      "   </div>\n",
      "  </div>\n",
      "  <div id=\"testClick\">\n",
      "  </div>\n",
      "  <div style=\"display:none;\">\n",
      "   <script>\n",
      "    var _hmt = _hmt || [];\n",
      "(function() {\n",
      "  var hm = document.createElement(\"script\");\n",
      "  hm.src = \"https://hm.baidu.com/hm.js?3eec0b7da6548cf07db3bc477ea905ee\";\n",
      "  var s = document.getElementsByTagName(\"script\")[0]; \n",
      "  s.parentNode.insertBefore(hm, s);\n",
      "})();\n",
      "   </script>\n",
      "  </div>\n",
      "  <script>\n",
      "   window.jsui={\n",
      "    www: 'https://www.runoob.com',\n",
      "    uri: 'https://www.runoob.com/wp-content/themes/runoob'\n",
      "};\n",
      "  </script>\n",
      "  <style>\n",
      "   ol,ul{list-style:none}.cd-switcher a{text-decoration:none;outline:0}.cd-switcher a:hover{text-decoration:underline}a:focus{outline:0;-moz-outline:0}.main_nav{width:300px;height:60px;margin:60px auto 10px auto}.main_nav li{float:left;width:60px;margin-right:10px;font-size:16px;padding:.6em 1em;border-radius:3em;background:#2f889a;text-align:center}.main_nav li a{color:#fff}.errtip{background-color:#fceaea;color:#db5353;padding:8px 15px;font-size:14px;border:1px solid #fc9797;border-radius:5px}.cd-user-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(52,54,66,0.9);z-index:3;overflow-y:auto;cursor:pointer;visibility:hidden;opacity:0;-webkit-transition:opacity .3s 0,visibility 0 .3s;-moz-transition:opacity .3s 0,visibility 0 .3s;transition:opacity .3s 0,visibility 0 .3s}.cd-user-modal.is-visible{visibility:visible;opacity:1;-webkit-transition:opacity .3s 0,visibility 0 0;-moz-transition:opacity .3s 0,visibility 0 0;transition:opacity .3s 0,visibility 0 0}.cd-user-modal.is-visible .cd-user-modal-container{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}.cd-user-modal-container{position:relative;width:90%;max-width:500px;background:#FFF;margin:3em auto 4em;cursor:auto;border-radius:.25em;-webkit-transform:translateY(-30px);-moz-transform:translateY(-30px);-ms-transform:translateY(-30px);-o-transform:translateY(-30px);transform:translateY(-30px);-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;transition-property:transform;-webkit-transition-duration:.3s;-moz-transition-duration:.3s;transition-duration:.3s}.cd-user-modal-container .cd-switcher:after{content:\"\";display:table;clear:both}.cd-user-modal-container .cd-switcher li{width:50%;float:left;text-align:center}.cd-user-modal-container .cd-switcher li:first-child a{border-radius:.25em 0 0 0}.cd-user-modal-container .cd-switcher li:last-child a{border-radius:0 .25em 0 0}.cd-user-modal-container .cd-switcher a{font-size:1.2em;font-weight:bold;display:block;width:100%;height:50px;line-height:50px;background:#e8f1e2;color:#96b880}.cd-user-modal-container .cd-switcher a.selected{background:#FFF;color:#505260}@media only screen and (min-width:600px){.cd-user-modal-container{margin:4em auto}.cd-user-modal-container .cd-switcher a{height:70px;line-height:70px}}.cd-form{padding:1.4em}.cd-form .fieldset{position:relative;margin:1.4em 0}.cd-form .fieldset:first-child{margin-top:0}.cd-form .fieldset:last-child{margin-bottom:0}.cd-form label{font-size:16px;font-size:.875rem}.cd-form label.image-replace{display:inline-block;position:absolute;left:15px;top:50%;bottom:auto;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);height:20px;width:20px;overflow:hidden;text-indent:100%;white-space:nowrap;color:transparent;text-shadow:none;background-repeat:no-repeat;background-position:50% 0}.cd-form label.cd-username{background-image:url(\"/wp-content/themes/runoob/assets/img/cd-icon-username.svg\")}.cd-form label.cd-email{background-image:url(\"/wp-content/themes/runoob/assets/img/cd-icon-email.svg\")}.cd-form label.cd-password{background-image:url(\"/wp-content/themes/runoob/assets/img/cd-icon-password.svg\")}.cd-form input{margin:0;padding:0;border-radius:.25em}.cd-form input.full-width{width:80%}.cd-form input.full-width2{width:94%}.cd-form input.has-padding{padding:12px 20px 12px 50px}.cd-form input.has-border{border:1px solid #d2d8d8;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none}.cd-form input.has-border:focus{border-color:#98b880;box-shadow:0 0 5px rgba(52,54,66,0.1);outline:0}.cd-form input.has-error{border:1px solid #d76666}.cd-form input[type=password]{padding-right:65px}.cd-form input[type=submit]{padding:16px 0;cursor:pointer;background:#96b97d;color:#FFF;font-weight:bold;border:0;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;font-size:1.2em;font-weight:bold}.no-touch .cd-form input[type=submit]:hover,.no-touch .cd-form input[type=submit]:focus{background:#3599ae;outline:0}@media only screen and (min-width:600px){.cd-form{padding:2em}.cd-form .fieldset{margin:2em 0}.cd-form .fieldset:first-child{margin-top:0}.cd-form .fieldset:last-child{margin-bottom:0}.cd-form input.has-padding{padding:16px 20px 16px 50px}.cd-form input[type=submit]{padding:16px 0}}.cd-close-form{display:block;position:absolute;width:40px;height:40px;right:0;top:-40px;background:url(\"/wp-content/themes/runoob/assets/img/cd-icon-close.svg\") no-repeat center center;text-indent:100%;white-space:nowrap;overflow:hidden}@media only screen and (min-width:1170px){}#cd-login,#cd-signup,#cd-reset-password{display:none}#cd-login.is-selected,#cd-signup.is-selected,#cd-reset-password.is-selected{display:block}\n",
      "  </style>\n",
      "  <div class=\"cd-user-modal\">\n",
      "   <div class=\"cd-user-modal-container\">\n",
      "    <ul class=\"cd-switcher\">\n",
      "     <li>\n",
      "      <a href=\"javascript:;\">\n",
      "       用户登录\n",
      "      </a>\n",
      "     </li>\n",
      "     <li>\n",
      "      <a href=\"javascript:;\">\n",
      "       注册新用户\n",
      "      </a>\n",
      "     </li>\n",
      "    </ul>\n",
      "    <div id=\"cd-login\">\n",
      "     <!-- 登录表单 -->\n",
      "     <div class=\"cd-form\">\n",
      "      <p class=\"fieldset\">\n",
      "       <label class=\"image-replace cd-username\" for=\"signin-username\">\n",
      "        用户名\n",
      "       </label>\n",
      "       <input class=\"full-width has-padding has-border\" id=\"signin-username\" name=\"username\" placeholder=\"输入用户名\" type=\"text\"/>\n",
      "      </p>\n",
      "      <p class=\"fieldset\">\n",
      "       <label class=\"image-replace cd-password\" for=\"signin-password\">\n",
      "        密码\n",
      "       </label>\n",
      "       <input class=\"full-width has-padding has-border\" id=\"signin-password\" name=\"password\" placeholder=\"输入密码\" type=\"password\"/>\n",
      "      </p>\n",
      "      <p class=\"fieldset\">\n",
      "       <input checked=\"\" id=\"remember-me\" type=\"checkbox\"/>\n",
      "       <label for=\"remember-me\">\n",
      "        记住登录状态\n",
      "       </label>\n",
      "       <a href=\"//www.runoob.com/reset-password\" style=\"float: right;padding-right: 20px;\" target=\"_blank\">\n",
      "        忘记密码？\n",
      "       </a>\n",
      "      </p>\n",
      "      <input name=\"action\" type=\"hidden\" value=\"signin\"/>\n",
      "      <p class=\"fieldset\">\n",
      "       <input class=\"full-width2\" type=\"submit\" value=\"登 录\"/>\n",
      "      </p>\n",
      "      <div class=\"err-msg\">\n",
      "      </div>\n",
      "     </div>\n",
      "    </div>\n",
      "    <div id=\"cd-signup\">\n",
      "     <!-- 注册表单 -->\n",
      "     <div class=\"cd-form\">\n",
      "      <p class=\"fieldset\">\n",
      "       <label class=\"image-replace cd-password\" for=\"verifycode\">\n",
      "        邀请码\n",
      "       </label>\n",
      "       <input class=\"full-width has-padding has-border\" id=\"signup-verifycode\" name=\"verifycode\" placeholder=\"输入邀请码\" type=\"text\"/>\n",
      "      </p>\n",
      "      <p class=\"fieldset\">\n",
      "       <label class=\"image-replace cd-username\" for=\"signup-username\">\n",
      "        用户名\n",
      "       </label>\n",
      "       <input class=\"full-width has-padding has-border\" id=\"signup-username\" name=\"name\" placeholder=\"输入用户名\" type=\"text\"/>\n",
      "      </p>\n",
      "      <p class=\"fieldset\">\n",
      "       <label class=\"image-replace cd-email\" for=\"signup-email\">\n",
      "        邮箱\n",
      "       </label>\n",
      "       <input class=\"full-width has-padding has-border\" id=\"signup-email\" name=\"email\" placeholder=\"输入mail\" type=\"email\"/>\n",
      "      </p>\n",
      "      <p class=\"fieldset\">\n",
      "       <label class=\"image-replace cd-password\" for=\"signup-password\">\n",
      "        密码\n",
      "       </label>\n",
      "       <input class=\"full-width has-padding has-border\" id=\"signup-password\" name=\"password\" placeholder=\"输入密码\" type=\"password\"/>\n",
      "      </p>\n",
      "      <p class=\"fieldset\">\n",
      "       <label class=\"image-replace cd-password\" for=\"signup-password2\">\n",
      "        重复输入密码\n",
      "       </label>\n",
      "       <input class=\"full-width has-padding has-border\" id=\"signup-password2\" name=\"password2\" placeholder=\"重复输入密码\" type=\"password\"/>\n",
      "      </p>\n",
      "      <!-- \n",
      "\t\t\t\t<p class=\"fieldset\">\n",
      "\t\t\t\t\t<input type=\"checkbox\" id=\"accept-terms\">\n",
      "\t\t\t\t\t<label for=\"accept-terms\">我已阅读并同意 <a href=\"javascript:;\">用户协议</a></label>\n",
      "\t\t\t\t</p>\n",
      "\t\t\t\t -->\n",
      "      <input name=\"action\" type=\"hidden\" value=\"signup\"/>\n",
      "      <p class=\"fieldset\">\n",
      "       <input class=\"full-width2\" type=\"submit\" value=\"注册新用户\"/>\n",
      "      </p>\n",
      "      <p class=\"fieldset\">\n",
      "       <a href=\"//www.runoob.com/w3cnote/runoob-user-test-intro.html#invite\" target=\"_blank\">\n",
      "        如何获取邀请码？\n",
      "       </a>\n",
      "      </p>\n",
      "      <div class=\"err-msg\">\n",
      "      </div>\n",
      "     </div>\n",
      "    </div>\n",
      "    <a class=\"cd-close-form\" href=\"javascript:;\">\n",
      "     关闭\n",
      "    </a>\n",
      "   </div>\n",
      "  </div>\n",
      "  <script src=\"/wp-content/themes/runoob/assets/js/main.min.js?v=1.191\">\n",
      "  </script>\n",
      "  <script src=\"https://static.runoob.com/assets/libs/hl/run_prettify.js\">\n",
      "  </script>\n",
      " </body>\n",
      "</html>\n"
     ]
    }
   ],
   "source": [
    "from bs4 import BeautifulSoup\n",
    "import requests\n",
    "url = 'https://www.runoob.com/cssref/css-selectors.html'\n",
    "r = requests.get(url)\n",
    "soup = BeautifulSoup(r.text,'lxml')\n",
    "print(soup.prettify())"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "ename": "NameError",
     "evalue": "name 'PyQuery' is not defined",
     "output_type": "error",
     "traceback": [
      "\u001b[1;31m---------------------------------------------------------------------------\u001b[0m",
      "\u001b[1;31mNameError\u001b[0m                                 Traceback (most recent call last)",
      "\u001b[1;32m<ipython-input-13-61620ac2baac>\u001b[0m in \u001b[0;36m<module>\u001b[1;34m\u001b[0m\n\u001b[1;32m----> 1\u001b[1;33m \u001b[0mdoc\u001b[0m \u001b[1;33m=\u001b[0m \u001b[0mPyQuery\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0murl\u001b[0m\u001b[1;33m=\u001b[0m\u001b[0murl\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0m\u001b[0;32m      2\u001b[0m \u001b[0mitem\u001b[0m \u001b[1;33m=\u001b[0m \u001b[0mdoc\u001b[0m\u001b[1;33m(\u001b[0m\u001b[1;34m'.mobile-nav'\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m      3\u001b[0m \u001b[0mprint\u001b[0m\u001b[1;33m(\u001b[0m\u001b[1;34m\"类型：\\n\"\u001b[0m\u001b[1;33m,\u001b[0m\u001b[0mtype\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0mitem\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m      4\u001b[0m \u001b[0mprint\u001b[0m\u001b[1;33m(\u001b[0m\u001b[1;34m'查找子孙节点文本：'\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m      5\u001b[0m \u001b[0mprint\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0mitem\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n",
      "\u001b[1;31mNameError\u001b[0m: name 'PyQuery' is not defined"
     ]
    }
   ],
   "source": [
    "doc = PyQuery(url=url)\n",
    "item = doc('.mobile-nav')\n",
    "print(\"类型：\\n\",type(item))\n",
    "print('查找子孙节点文本：')\n",
    "print(item)\n",
    "lis = item.find('li')#查找find的文本,范围：查找所有子孙节点\n",
    "print(lis)\n",
    "print(\"子节点\")\n",
    "lis2 = item.children()#子节点\n",
    "print(lis2)\n",
    "print(\"父类节点：\")\n",
    "lis3 = item.parent('.row')\n",
    "print(lis3)\n",
    "print(\"祖先节点：\")\n",
    "lis4 = item.parents('.row')\n",
    "print(lis4)\n",
    "\n",
    "print(\"子节点的兄弟节点：\")\n",
    "lis5 =lis2.siblings()\n",
    "print(lis5)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "在使用的同时可以采用for循环进行遍历\n",
    "\n",
    "## 信息获取上，我们可以获取属性或者文本\n",
    "\n",
    "下面我们以上述子节点lis2为例："
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "ename": "NameError",
     "evalue": "name 'lis2' is not defined",
     "output_type": "error",
     "traceback": [
      "\u001b[1;31m---------------------------------------------------------------------------\u001b[0m",
      "\u001b[1;31mNameError\u001b[0m                                 Traceback (most recent call last)",
      "\u001b[1;32m<ipython-input-12-327f65fbfc7b>\u001b[0m in \u001b[0;36m<module>\u001b[1;34m\u001b[0m\n\u001b[1;32m----> 1\u001b[1;33m \u001b[0mprint\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0mlis2\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0m\u001b[0;32m      2\u001b[0m \u001b[0ma\u001b[0m \u001b[1;33m=\u001b[0m \u001b[0mlis2\u001b[0m\u001b[1;33m(\u001b[0m\u001b[1;34m'a'\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m      3\u001b[0m \u001b[0mprint\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0ma\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mattr\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mhref\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m      4\u001b[0m \u001b[1;31m#默认是查找第一个项目的，遍历要使用items方法。\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m      5\u001b[0m \u001b[1;33m\u001b[0m\u001b[0m\n",
      "\u001b[1;31mNameError\u001b[0m: name 'lis2' is not defined"
     ]
    }
   ],
   "source": [
    "print(lis2)\n",
    "a = lis2('a')\n",
    "print(a.attr.href)\n",
    "#默认是查找第一个项目的，遍历要使用items方法。\n",
    "\n",
    "print(\"遍历：\")\n",
    "for li in a.items():\n",
    "    print(li.attr.href)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "所有文本：\n"
     ]
    },
    {
     "ename": "NameError",
     "evalue": "name 'lis2' is not defined",
     "output_type": "error",
     "traceback": [
      "\u001b[1;31m---------------------------------------------------------------------------\u001b[0m",
      "\u001b[1;31mNameError\u001b[0m                                 Traceback (most recent call last)",
      "\u001b[1;32m<ipython-input-10-fcad7b27b208>\u001b[0m in \u001b[0;36m<module>\u001b[1;34m\u001b[0m\n\u001b[0;32m      1\u001b[0m \u001b[1;31m#文本同样使用text()方法实现：\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m      2\u001b[0m \u001b[0mprint\u001b[0m\u001b[1;33m(\u001b[0m\u001b[1;34m\"所有文本：\"\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[1;32m----> 3\u001b[1;33m \u001b[0mprint\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0mlis2\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mtext\u001b[0m\u001b[1;33m(\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0m\u001b[0;32m      4\u001b[0m \u001b[0mprint\u001b[0m\u001b[1;33m(\u001b[0m\u001b[1;34m\"遍历：\"\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m      5\u001b[0m \u001b[1;32mfor\u001b[0m \u001b[0mi\u001b[0m \u001b[1;32min\u001b[0m \u001b[0mlis2\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mitems\u001b[0m\u001b[1;33m(\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m:\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n",
      "\u001b[1;31mNameError\u001b[0m: name 'lis2' is not defined"
     ]
    }
   ],
   "source": [
    "#文本同样使用text()方法实现：\n",
    "print(\"所有文本：\")\n",
    "print(lis2.text())\n",
    "print(\"遍历：\")\n",
    "for i in lis2.items():\n",
    "    print(\"文本：\",i.text())\n",
    "    print(\"html文本：\",i.html())"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 节点操作与动态修改\n",
    "\n",
    "<font face=\"黑体\" color=purple size=4>1. addClass & removeClass</font>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 39,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "原始html\n",
      "<li class=\"item-0\" name=\"link\">changedIttem</li>\n",
      "\t\t\t\t<li class=\"item-0\" name=\"link\">changedIttem</li>\n",
      "\t\t\t\t<li class=\"item-0\" name=\"link\">changedIttem</li>\n",
      "\t\t\t\t<li class=\"item-0\" name=\"link\">changedIttem</li>\n",
      "\t\t\t\t<li class=\"item-0\" name=\"link\">changedIttem</li>\n",
      "\t\t\t\t<a href=\"javascript:void(0)\" class=\"item-0 search-reveal\" name=\"link\">changedIttem</a> \n",
      "\t\t\t\n",
      "添加class属性后：\n",
      "<li class=\"item-0 active\" name=\"link\">changedIttem</li>\n",
      "\t\t\t\t<li class=\"item-0 active\" name=\"link\">changedIttem</li>\n",
      "\t\t\t\t<li class=\"item-0 active\" name=\"link\">changedIttem</li>\n",
      "\t\t\t\t<li class=\"item-0 active\" name=\"link\">changedIttem</li>\n",
      "\t\t\t\t<li class=\"item-0 active\" name=\"link\">changedIttem</li>\n",
      "\t\t\t\t<a href=\"javascript:void(0)\" class=\"item-0 search-reveal active\" name=\"link\">changedIttem</a> \n",
      "\t\t\t\n",
      "去除active 的 class属性后：\n",
      "<li class=\"item-0\" name=\"link\">changedIttem</li>\n",
      "\t\t\t\t<li class=\"item-0\" name=\"link\">changedIttem</li>\n",
      "\t\t\t\t<li class=\"item-0\" name=\"link\">changedIttem</li>\n",
      "\t\t\t\t<li class=\"item-0\" name=\"link\">changedIttem</li>\n",
      "\t\t\t\t<li class=\"item-0\" name=\"link\">changedIttem</li>\n",
      "\t\t\t\t<a href=\"javascript:void(0)\" class=\"item-0 search-reveal\" name=\"link\">changedIttem</a> \n",
      "\t\t\t\n"
     ]
    }
   ],
   "source": [
    "print(\"原始html\")\n",
    "print(lis2)\n",
    "lis2.add_class('active')\n",
    "lis2.add_class('item-0')\n",
    "print(\"添加class属性后：\")\n",
    "print(lis2)\n",
    "print(\"去除active 的 class属性后：\")\n",
    "lis2.remove_class('active')\n",
    "print(lis2)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "<font face=\"黑体\" color=green size=5>2.attr text html</font>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 40,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "文本调整：\n",
      "<li class=\"item-0\" name=\"link\">changedIttem</li>\n",
      "\t\t\t\t<li class=\"item-0\" name=\"link\">changedIttem</li>\n",
      "\t\t\t\t<li class=\"item-0\" name=\"link\">changedIttem</li>\n",
      "\t\t\t\t<li class=\"item-0\" name=\"link\">changedIttem</li>\n",
      "\t\t\t\t<li class=\"item-0\" name=\"link\">changedIttem</li>\n",
      "\t\t\t\t<a href=\"javascript:void(0)\" class=\"item-0 search-reveal\" name=\"link\">changedIttem</a> \n",
      "\t\t\t\n",
      "修改属性：\n",
      "<li class=\"item-0\" name=\"link\">changedIttem</li>\n",
      "\t\t\t\t<li class=\"item-0\" name=\"link\">changedIttem</li>\n",
      "\t\t\t\t<li class=\"item-0\" name=\"link\">changedIttem</li>\n",
      "\t\t\t\t<li class=\"item-0\" name=\"link\">changedIttem</li>\n",
      "\t\t\t\t<li class=\"item-0\" name=\"link\">changedIttem</li>\n",
      "\t\t\t\t<a href=\"javascript:void(0)\" class=\"item-0 search-reveal\" name=\"link\">changedIttem</a> \n",
      "\t\t\t\n"
     ]
    }
   ],
   "source": [
    "print(\"文本调整：\")\n",
    "lis2.text(\"changedIttem\")\n",
    "print(lis2)\n",
    "print(\"修改属性：\")\n",
    "lis2.attr('name','link')\n",
    "print(lis2)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "aaaaaa\n"
     ]
    }
   ],
   "source": [
    "#remove()方法实现文本节点的剔除\n",
    "h = '<div>aaaaaa<p>bbbbbbb</p></div>'\n",
    "from pyquery import PyQuery\n",
    "doc = PyQuery(h)\n",
    "doc.find('p').remove()#剔除不要的p节点\n",
    "print(doc.text())"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "remove()方法实现了剔除不需要的html格式文本，选择自己需要的\n",
    "\n",
    "另外，其实还有很多节点操作的方法，比如append()、empty()和 prepend()等方法，它们和 jQuery 的用法完全一致\n",
    "\n",
    "<font face=\"黑体\" color=green size=5> 3.伪类选择器 </font>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 42,
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "\n"
     ]
    }
   ],
   "source": [
    "print(lis2('li:last-child'))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "更多内容,参考pyquery的官方文档：[http://pyquery.readthedocs.io](http://pyquery.readthedocs.io)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}
